feat(frontend): infinite paginated feed and a hand-written design system

The feed used to end. REC_LIMIT (10) papers plus 2 exploration picks, then a
dead end — and dismissing shrank it further, so actively triaging drained the
page toward empty. That is an inbox, not a feed.

Feed
- GET /api/recommendations?page=N&query_id=… The first request ranks a 60-deep
pool and caches the ORDER under its query_id; later pages replay it, so they
cost a metadata fetch rather than a recluster + re-retrieve + rescore.
Measured cold, one process: page 1 3506ms, page 2 1.6ms, no overlap.
- Exploration is drawn PER PAGE from a pre-shuffled pool, so doc 06 §3.5's "2
serendipitous papers per feed" holds for every page. Injecting once over the
pool would dilute the ratio and strand every pick on the last page, since
inject_exploration appends.
- Scroll-to-load is driven by an IntersectionObserver in app.js that clicks a
real <button>. Both htmx built-ins were tried against the deployment first:
`revealed` cannot fire when combined with a second trigger (htmx's poller
matches the attribute string exactly), and `intersect once` wired its handler
but never fired on real scrolling. Keeping a button means keyboard and
screen-reader users can still advance the feed, which NN/g flags as the usual
casualty of infinite scroll.

Dismissal
- Deferred 5s so Undo cancels the POST rather than compensating for it. A
dismissal is folded into the negative EWMA, and an EWMA is a lossy running
average with no exact inverse — an undone dismissal must never be sent at all.
Verified by watching the network: no request is issued when Undo is clicked.

CSS
- Tailwind Play CDN, DaisyUI, Google Fonts and the unpkg htmx are gone; htmx is
vendored. Zero external origins. Tailwind's docs call the Play CDN a
development tool, and its documented worst case — "elements added to the page
after first load" — is precisely an htmx-swapped card on an infinite feed.
- One hand-written stylesheet: warm near-black ground, a single green accent
reserved for Save, content in a serif and chrome in sans/mono, category chips
on Radix step semantics. Three theme states (system / explicit light /
explicit dark) with every colour defined in the bare :root, so nothing
depends on a media query being present.

Card
- The abstract's lead sentence is emphasised and the rest dimmed, approximating
Scholar Inbox's "highlight the sentence most related to the core idea"; NN/g's
F-pattern work finds attention decays sharply after the first lines.
- "Why this?" ships for real, derived from candidate_source, replacing the
Coming Soon badge that sat on every card.
- Metadata collapsed to one dim line; five facts no longer get five treatments.

Also: hero removed so the first paper is visible on load; onboarding states that
5 saves is the Tier-1 threshold (the gap PHASE8 flagged); groq_svc returns None
instead of raising when the package is absent, so a missing optional dependency
no longer turns /api/search/summary into a 500 and an error toast.

Tests
- tests/test_template_selectors.py — static, no server, no browser, 0.02s.
htmx passes hx-target straight to querySelectorAll unescaped (issues #1537,
#2601); an arXiv id's dot starts a class token, so "#actions-1706.03762" is
read as id="actions-1706" AND class="03762" and RAISES. Maintainer position is
that escaping is the application's job, and CSS.escape was rejected for 1.x
over IE11 — so pinned to 1.9.12 the rule is enforced here. Verified
adversarially: reintroducing either shipped bug fails the suite.
- tests/test_e2e_browser.py — Playwright. Asserts what only a browser sees.
11/11 against the deployment; locally it skips the feed cases when no metadata
sidecar is present rather than hanging.
- playwright stays out of requirements.txt (the Dockerfile installs that file
and would pull ~95 MB of Chromium into the image); requirements-dev.txt added.

Search deliberately keeps bounded results: NN/g endorses infinite scroll for
"homogeneous items with no particular task or goal in mind" and against it for
finding something specific.

Note on scope: this repository stays decoupled from researchit-space. The map
JSON API, its config and the 3D links live only in the deployment and are
deliberately absent here.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>

app/config.py

@@ -5,6 +5,11 @@ All credentials live in .env locally; override with env vars in production.
 import os
 from dotenv import load_dotenv
 
+# .env.local first, then .env. load_dotenv does not overwrite a name that is
+# already set, so the first file to define a key wins — which makes .env.local
+# the local override and .env the shared default. Real environment variables
+# still beat both, so nothing changes in the container.
+load_dotenv(".env.local")
 load_dotenv()  # reads .env file if present (won't override existing env vars)
 
 # ── Qdrant (BGE-M3 dense, 1 024-dim) ─────────────────────────────────────────
@@ -387,3 +392,4 @@ def expand_category_groups(group_keys: list[str]) -> set[str]:
         if grp:
             cats.update(grp["arxiv"])
     return cats
+

app/groq_svc.py

@@ -34,7 +34,18 @@ def _get_client():
         if _client is not None:
             return _client
 
-        from groq import Groq
+        # Returning None rather than raising when the package is absent. Every
+        # other optional dependency here degrades quietly — BGE-M3, Zilliz,
+        # LightGBM and the metadata sidecar all fall back — but this one raised
+        # ModuleNotFoundError straight out of the request, so /api/search/summary
+        # answered 500 and the page showed "Something went wrong" instead of
+        # simply omitting the overview. The rewriter has the same call path, so
+        # a missing groq also broke search itself, not just the summary.
+        try:
+            from groq import Groq
+        except ImportError:
+            print("[groq_svc] groq not installed -- summaries and rewrite disabled")
+            return None
 
         _client = Groq(api_key=config.GROQ_API_KEY)
         print("[groq_svc] Groq client initialized")

app/routers/events.py

@@ -54,10 +54,26 @@ async def save_paper(
     # warms the in-process vector cache, which is the one that still matters.
     asyncio.create_task(_update_profile_on_save(user_id, paper_id))
 
+    # The response replaces the whole actions row, so it has to carry enough
+    # context to re-render every control in it — including "Why this?", which
+    # is derived from candidate_source. Without these the button silently
+    # disappeared the moment a user saved the paper.
     resp = templates.TemplateResponse(
         request,
         "partials/action_buttons.html",
-        {"paper_id": paper_id, "saved": True, "dismissed": False, "source": source},
+        {
+            "paper_id": paper_id,
+            "saved": True,
+            "dismissed": False,
+            "source": source,
+            "position": position,
+            "query_id": query_id,
+            "ranker_version": ranker_version,
+            "candidate_source": candidate_source,
+            "cluster_id": cluster_id,
+            "propensity": propensity,
+            "policy_id": policy_id,
+        },
     )
     resp.set_cookie(COOKIE_NAME, user_id, max_age=365 * 24 * 3600, httponly=True)
     return resp

app/routers/recommendations.py

@@ -16,8 +16,11 @@ Phase 4 changes vs Phase 2b:
   - Category-level suppression filters strongly disliked topics (4.3)
 """
 import asyncio
+import random
 import time
 import uuid
+from collections import OrderedDict
+
 import numpy as np
 from fastapi import APIRouter, Request, Cookie
 from fastapi.responses import HTMLResponse
@@ -34,13 +37,17 @@ from app.recommend.clustering import (
 )
 from app.recommend.fusion import allocate_quotas, merge_quota_results
 from app.recommend.reranker import rerank_candidates
-from app.recommend.diversity import mmr_rerank, inject_exploration
+# inject_exploration is no longer imported here: exploration is now drawn per
+# page in _build_page() from a pre-shuffled pool, so that doc 06 §3.5's "two
+# serendipitous papers per feed" holds for every page rather than once per pool.
+from app.recommend.diversity import mmr_rerank
 
 router = APIRouter(prefix="/api")
 
 # Phase 4.5: Pipeline version tag for instrumentation.  Bump this on any
 # change to the ranking logic so A/B attribution is possible.
-_RANKER_VERSION = "v6.5_lightgbm_real_cosines"
+# v7 = paginated serving; ranking itself is unchanged.
+_RANKER_VERSION = "v7.0_paginated_feed"
 
 # Minimum EWMA interactions before switching from ID-based to vector-based recs
 _MIN_EWMA_INTERACTIONS = 3
@@ -51,165 +58,317 @@ _OVERSAMPLE = 3
 # Short-term session context: fixed supplementary pool size
 _ST_SUPPLEMENT = 20
 
+# ── Paginated feed ───────────────────────────────────────────────────────────
+#
+# The feed used to terminate: REC_LIMIT (10) papers plus 2 exploration picks,
+# then a dead end with a "show different recommendations" button. Dismissing
+# shrank it further, so triaging drained the page toward empty.
+#
+# Rather than re-running the pipeline per page — it reclusters, re-retrieves
+# and rescores, and its exploration step is random, so page 2 would both cost
+# seconds and risk repeating page 1 — the first request ranks a deep pool once
+# and caches the ORDER under its query_id. Later pages are then a metadata
+# fetch and nothing else.
+#
+# Keying on query_id rather than user_id is deliberate: query_id already exists
+# to group one feed's impressions for per-feed CTR (Phase 6.5 B1), so a feed
+# and its cache entry share a lifetime, and two tabs get two independent feeds.
+
+_PAGE_SIZE = REC_LIMIT          # ranked papers per page
+_FEED_POOL = 60                 # how deep MMR ranks on the first request
+_N_EXPLORE = 2                  # exploration picks PER PAGE (doc 06 §3.5)
+
+# Tier 0 gets a shallower pool than the behavioural tiers. Trending is a
+# LIKE '%code%' scan plus a temp B-tree sort over 1.6M rows — the single most
+# expensive query in the system, and the one that lands on brand-new users.
+# Asking it for 60 rows instead of 10 made it time out entirely against Turso
+# without the local sidecar. Three pages is plenty before behavioural signal
+# takes over, and the sidecar makes this an index range read in production.
+_TRENDING_POOL = 30
+
+_FEED_CACHE: "OrderedDict[str, dict]" = OrderedDict()
+_FEED_CACHE_MAX = 200
+
+
+def _cache_put(query_id: str, entry: dict) -> None:
+    _FEED_CACHE[query_id] = entry
+    _FEED_CACHE.move_to_end(query_id)
+    while len(_FEED_CACHE) > _FEED_CACHE_MAX:
+        _FEED_CACHE.popitem(last=False)
+
+
+def _cache_get(query_id: str) -> dict | None:
+    entry = _FEED_CACHE.get(query_id)
+    if entry is not None:
+        _FEED_CACHE.move_to_end(query_id)
+    return entry
+
+
+def feed_cache_stats() -> dict:
+    """For diagnostics parity with the other in-process caches."""
+    return {"size": len(_FEED_CACHE), "max": _FEED_CACHE_MAX}
+
+
+def _take(pool: list[str], entry: dict, seen: set[str], n: int) -> list[str]:
+    """Pull the next n unserved ids from `pool`.
+
+    Tracks what has already been emitted on the entry rather than slicing by
+    page index, because `seen` grows while the user reads: a paper saved on
+    page 1 disappears from the pool, and index arithmetic would then silently
+    skip its neighbour.
+    """
+    out: list[str] = []
+    emitted = entry["emitted"]
+    for aid in pool:
+        if len(out) >= n:
+            break
+        if aid in emitted or aid in seen:
+            continue
+        out.append(aid)
+        emitted.add(aid)
+    return out
+
 
 @router.get("/recommendations", response_class=HTMLResponse)
 async def get_recommendations(
     request: Request,
+    page: int = 1,
+    query_id: str | None = None,
     user_id: str | None = Cookie(default=None, alias=COOKIE_NAME),
 ):
+    """
+    Serve one page of the feed.
+
+    page=1 (or an unknown query_id) runs the full pipeline, ranks a deep pool
+    and caches the ordering. Later pages replay that ordering, so they cost a
+    metadata fetch instead of a recluster + re-retrieve + rescore.
+    """
     user_id = user_id or str(uuid.uuid4())
     state = await us.ensure_loaded(user_id)
+    page = max(1, page)
 
-    # Phase 6.5 B1: one query_id per feed request for per-feed CTR analysis
-    query_id = str(uuid.uuid4())
+    def _with_cookie(resp):
+        resp.set_cookie(COOKIE_NAME, user_id, max_age=365 * 24 * 3600, httponly=True)
+        return resp
 
     def _empty_resp():
-        r = templates.TemplateResponse(
-            request,
-            "partials/empty_recs.html",
-            {"min_saves": REC_MIN_POSITIVES},
-        )
-        r.set_cookie(COOKIE_NAME, user_id, max_age=365 * 24 * 3600, httponly=True)
-        return r
+        return _with_cookie(templates.TemplateResponse(
+            request, "partials/empty_recs.html", {"min_saves": REC_MIN_POSITIVES},
+        ))
+
+    # Continue an existing feed only when the loader asks for a later page AND
+    # we still hold its ordering. A cache miss (restart, eviction) falls through
+    # to a fresh feed rather than erroring — the user sees new papers, which is
+    # the correct failure mode for a feed.
+    entry = _cache_get(query_id) if (query_id and page > 1) else None
+
+    if entry is None:
+        query_id = str(uuid.uuid4())
+        page = 1
+        entry = await _build_feed(user_id, state, query_id)
+        if entry is None:
+            return _empty_resp()
+        _cache_put(query_id, entry)
+
+    seen = us.all_seen(user_id)
+    papers, has_more = await _build_page(entry, seen)
+
+    if not papers:
+        return _empty_resp() if page == 1 else _with_cookie(
+            templates.TemplateResponse(
+                request, "partials/rec_page.html",
+                {"papers": [], "has_more": False,
+                 "next_page": page + 1, "query_id": query_id},
+            ))
+
+    # Page 1 brings the .feed wrapper; later pages are bare fragments that the
+    # loader button swaps itself out for.
+    template = "partials/recommendations.html" if page == 1 else "partials/rec_page.html"
+
+    return _with_cookie(templates.TemplateResponse(
+        request, template,
+        {
+            "papers": papers,
+            "has_more": has_more,
+            "next_page": page + 1,
+            "query_id": entry["query_id"],
+            "trending": entry.get("trending", False),
+        },
+    ))
+
 
+# ── Feed construction ────────────────────────────────────────────────────────
+
+async def _build_feed(user_id: str, state, query_id: str) -> dict | None:
+    """
+    Run the tier cascade once and return a cacheable feed entry, or None when
+    there is nothing to show.
+
+    entry = {
+        ranked   ordered ids — the MMR-diversified feed
+        explore  shuffled leftover candidates, drawn from for serendipity
+        tags     {arxiv_id: instrumentation dict}
+        emitted  ids already served on some page of this feed
+        position running global rank, so `position` is continuous across pages
+    }
+    """
+    base = {
+        "query_id": query_id,
+        "emitted": set(),
+        "position": 0,
+        "trending": False,
+    }
+
+    # ── Tier 0: category trending (cold start, Phase 5) ──────────────────
     if not state.has_enough_for_recs():
-        # ── Tier 0: Category-filtered trending (Phase 5 cold-start) ──────
-        # If user has onboarded with category selections but hasn't saved
-        # enough papers yet, serve trending papers in their areas.
         category_filter = await db.get_user_category_filter(user_id)
         if category_filter:
             trending = await turso_svc.fetch_trending_by_categories(
-                category_filter, limit=REC_LIMIT,
+                category_filter, limit=_TRENDING_POOL,
             )
             if trending:
-                papers = []
-                for idx, paper in enumerate(trending):
-                    paper["saved"] = False
-                    paper["dismissed"] = False
-                    paper["ranker_version"] = _RANKER_VERSION
-                    paper["candidate_source"] = "trending_category_fallback"
-                    paper["cluster_id"] = ""
-                    paper["query_id"] = query_id
-                    paper["position"] = idx
-                    paper["propensity"] = 1.0  # deterministic
-                    paper["policy_id"] = _RANKER_VERSION
-                    papers.append(paper)
-
-                r = templates.TemplateResponse(
-                    request,
-                    "partials/recommendations.html",
-                    {"papers": papers, "source": "recommendation", "trending": True},
-                )
-                r.set_cookie(COOKIE_NAME, user_id, max_age=365 * 24 * 3600, httponly=True)
-                return r
-
-        return _empty_resp()
+                ids = [p["arxiv_id"] for p in trending if p.get("arxiv_id")]
+                if ids:
+                    return {
+                        **base,
+                        "trending": True,
+                        "ranked": ids,
+                        "explore": [],
+                        "tags": {
+                            aid: {
+                                "ranker_version": _RANKER_VERSION,
+                                "candidate_source": "trending_category_fallback",
+                                "cluster_id": "",
+                                "query_id": query_id,
+                                "propensity": 1.0,
+                                "policy_id": _RANKER_VERSION,
+                            } for aid in ids
+                        },
+                    }
+        return None
 
     seen = us.all_seen(user_id)
 
-    # Phase 4.5: paper_tags maps arxiv_id → instrumentation metadata
-    # populated by whichever tier serves the result.
-    paper_tags: dict[str, dict] = {}
-    rec_arxiv_ids: list[str] = []
-    rerank_time_ms = 0
-    timing_breakdown: dict = {}
-
-    # ── Tier 1: Multi-interest clustering + quota fusion (≥5 saves) ──────
-    rec_arxiv_ids, paper_tags, rerank_time_ms, timing_breakdown = await _multi_interest_recommend(
-        user_id, state, seen, REC_LIMIT, query_id=query_id,
+    # ── Tier 1: multi-interest clustering + quota fusion (≥5 saves) ──────
+    ranked, explore, tags, _rerank_ms, _timing = await _multi_interest_recommend(
+        user_id, state, seen, _FEED_POOL, query_id=query_id,
     )
 
-    # ── Tier 2: EWMA single-vector search (≥3 saves) ──────────────────────
-    if not rec_arxiv_ids:
-        rec_arxiv_ids = await _ewma_recommend(user_id, seen, REC_LIMIT)
-        for aid in rec_arxiv_ids:
-            paper_tags[aid] = {
+    # ── Tier 2: EWMA single-vector search (≥3 saves) ─────────────────────
+    if not ranked:
+        ranked = await _ewma_recommend(user_id, seen, _FEED_POOL)
+        explore, tags = [], {
+            aid: {
                 "ranker_version": _RANKER_VERSION,
                 "candidate_source": "ewma_longterm",
                 "cluster_id": "",
                 "query_id": query_id,
                 "propensity": 1.0,
                 "policy_id": _RANKER_VERSION,
-            }
+            } for aid in ranked
+        }
 
-    # ── Tier 3: Qdrant Recommend API (≥1 save fallback) ───────────────────
-    if not rec_arxiv_ids:
-        rec_arxiv_ids = await qdrant_svc.recommend(
+    # ── Tier 3: Qdrant Recommend API (≥1 save) ───────────────────────────
+    if not ranked:
+        ranked = await qdrant_svc.recommend(
             positive_arxiv_ids=state.positive_list,
             negative_arxiv_ids=state.negative_list,
             seen_arxiv_ids=seen,
-            limit=REC_LIMIT,
+            limit=_FEED_POOL,
         )
-        for aid in rec_arxiv_ids:
-            paper_tags[aid] = {
+        explore, tags = [], {
+            aid: {
                 "ranker_version": _RANKER_VERSION,
                 "candidate_source": "qdrant_recommend",
                 "cluster_id": "",
                 "query_id": query_id,
                 "propensity": 1.0,
                 "policy_id": _RANKER_VERSION,
-            }
-
-    if not rec_arxiv_ids:
-        return _empty_resp()
+            } for aid in ranked
+        }
+
+    if not ranked:
+        return None
+
+    # Shuffled once, then drawn from in order. Doc 06 §3.5 calls for
+    # SERENDIPITOUS picks — taking the pool's head instead would just serve
+    # "next best by score", which is not the same thing. Shuffling here rather
+    # than sampling per page keeps picks non-repeating across pages for free.
+    explore = list(explore)
+    random.shuffle(explore)
+
+    return {**base, "ranked": ranked, "explore": explore, "tags": tags}
+
+
+async def _build_page(entry: dict, seen: set[str]) -> tuple[list[dict], bool]:
+    """Materialise the next page: _PAGE_SIZE ranked papers + _N_EXPLORE picks."""
+    core = _take(entry["ranked"], entry, seen, _PAGE_SIZE)
+    # Exploration rides along with ranked papers; it never carries a page on its
+    # own. Without this guard the feed could report "that's everything" (has_more
+    # is computed over `ranked`) and then still hand back an exploration-only
+    # page to anyone who asked for the next one.
+    explore = (
+        _take(entry["explore"], entry, seen, _N_EXPLORE)
+        if core and entry["explore"] else []
+    )
+    ids = core + explore
+    if not ids:
+        return [], False
 
-    # Phase 3.5: Turso primary, arXiv API fallback
-    t0_meta = time.time()
-    meta = await turso_svc.fetch_metadata_batch(rec_arxiv_ids)
-    missing = [aid for aid in rec_arxiv_ids if aid not in meta]
+    # Phase 3.5: Turso primary (sidecar-backed), arXiv API fallback.
+    meta = await turso_svc.fetch_metadata_batch(ids)
+    missing = [aid for aid in ids if aid not in meta]
     if missing:
         try:
-            arxiv_meta = await arxiv_svc.fetch_metadata_batch(missing)
-            meta.update(arxiv_meta)
+            meta.update(await arxiv_svc.fetch_metadata_batch(missing))
         except Exception as e:
             print(f"[recommendations] arXiv fallback for {len(missing)} IDs failed: {e}")
-    t1_meta = time.time()
-    meta_time_ms = int((t1_meta - t0_meta) * 1000)
 
-    # Cache to SQLite so category suppression JOINs work (Phase 4.3)
+    # Cache to SQLite so category-suppression JOINs work (Phase 4.3)
     await db.cache_turso_metadata_batch(list(meta.values()))
 
-    papers = []
-    for idx, aid in enumerate(rec_arxiv_ids):
+    explore_set = set(explore)
+    # Phase 6.5 B2: probability this policy chose to show an exploration paper
+    # on this page — the fraction of the pool drawn. Deterministic slots are 1.0.
+    explore_propensity = (
+        len(explore) / len(entry["explore"]) if entry["explore"] else 0.0
+    )
+
+    papers: list[dict] = []
+    for aid in ids:
         if aid not in meta:
             continue
-        tags = paper_tags.get(aid, {})
+        tags = entry["tags"].get(aid, {})
+        is_explore = aid in explore_set
         papers.append({
             **meta[aid],
             "saved": False,
             "dismissed": False,
-            # Phase 4.5 instrumentation — embedded in card, flows back via HTMX
             "ranker_version": tags.get("ranker_version", _RANKER_VERSION),
-            "candidate_source": tags.get("candidate_source", ""),
-            "cluster_id": tags.get("cluster_id", ""),
-            # Phase 6.5 B1: query_id + position for per-feed CTR
-            "query_id": tags.get("query_id", query_id),
-            "position": idx,
-            # Phase 6.5 B2: propensity + policy_id for counterfactual eval
-            "propensity": tags.get("propensity", 1.0),
+            # Serving as an exploration pick overrides the retrieval origin —
+            # the same paper is only "exploration" by virtue of how it was shown.
+            "candidate_source": "exploration" if is_explore
+                                else tags.get("candidate_source", ""),
+            "cluster_id": "" if is_explore else tags.get("cluster_id", ""),
+            "query_id": entry["query_id"],
+            "position": entry["position"],
+            "propensity": explore_propensity if is_explore
+                          else tags.get("propensity", 1.0),
             "policy_id": tags.get("policy_id", _RANKER_VERSION),
         })
+        entry["position"] += 1
 
-    resp = templates.TemplateResponse(
-        request,
-        "partials/recommendations.html",
-        {
-            "papers": papers,
-            "rerank_time_ms": rerank_time_ms,
-            "meta_time_ms": meta_time_ms,
-            "timing": timing_breakdown,
-        },
+    has_more = any(
+        aid not in entry["emitted"] and aid not in seen
+        for aid in entry["ranked"]
     )
-    resp.set_cookie(COOKIE_NAME, user_id, max_age=365 * 24 * 3600, httponly=True)
-    return resp
-
-
+    return papers, has_more
 # ── Tier 1: Multi-interest clustering + quota fusion ─────────────────────────
 
 async def _multi_interest_recommend(
     user_id: str, state, seen: set[str], limit: int,
     *, query_id: str = "",
-) -> tuple[list[str], dict[str, dict]]:
+) -> tuple[list[str], list[str], dict[str, dict], int, dict]:
     """
     Full recommendation pipeline (Phase 2b + Phase 4 corrections):
       1. Ward clustering → identify distinct interests
@@ -226,13 +385,13 @@ async def _multi_interest_recommend(
     """
     positives = state.positive_list
     if len(positives) < MIN_PAPERS_FOR_CLUSTERING:
-        return [], {}, 0, {}
+        return [], [], {}, 0, {}
 
     try:
         # Fetch embeddings for all saved papers
         vectors = await qdrant_svc.get_paper_vectors(positives)
         if len(vectors) < MIN_PAPERS_FOR_CLUSTERING:
-            return [], {}, 0, {}
+            return [], [], {}, 0, {}
 
         timing = {}  # Collect per-stage timing breakdown
 
@@ -355,7 +514,7 @@ async def _multi_interest_recommend(
                     qdrant_score_map[aid] = float(hit["score"])
 
         if not candidate_ids:
-            return [], {}, 0, {}
+            return [], [], {}, 0, {}
         timing["ann_retrieval_ms"] = int((time.time() - t0_ann) * 1000)
 
         # ── Step 5: Fetch candidate vectors + metadata ────────────────────
@@ -379,7 +538,7 @@ async def _multi_interest_recommend(
         # Only process candidates with both vectors and metadata
         valid_ids = [cid for cid in candidate_ids if cid in cand_vectors and cid in cand_meta]
         if not valid_ids:
-            return candidate_ids[:limit], {}, 0, {}
+            return candidate_ids[:limit], [], {}, 0, {}
         timing["candidate_meta_ms"] = int((time.time() - t0_cand_meta) * 1000)
 
         valid_embs = np.array([cand_vectors[cid] for cid in valid_ids], dtype=np.float32)
@@ -508,31 +667,24 @@ async def _multi_interest_recommend(
         )
         timing["mmr_ms"] = int((time.time() - t0_mmr) * 1000)
 
-        # ── Step 8: Exploration injection ���────────────────────────────────
-        final = inject_exploration(
-            selected_ids=mmr_selected,
-            all_candidate_ids=reranked_ids,
-            n_explore=2,
-        )
-        final = final[:limit + 2]
-
-        # Phase 4.5 + 6.5: Build per-paper instrumentation tags
-        exploration_set = set(final) - set(mmr_selected)
-
-        # Phase 6.5 B2: Compute propensity for counterfactual evaluation
-        # MMR-selected papers are deterministic → propensity = 1.0
-        # Exploration papers are randomly sampled → propensity = n_explore / pool_size
+        # ── Step 8: Split into the ranked feed and the exploration pool ───
+        # Exploration is NOT injected here any more. Doc 06 §3.5 specifies two
+        # serendipitous papers per FEED, and with pagination a "feed" is one
+        # page — so the injection happens per page in _build_page(), against
+        # this pool. Injecting once over a 60-deep pool would have both diluted
+        # the ratio and stranded every exploration pick on the last page,
+        # because inject_exploration appends.
         mmr_set = set(mmr_selected)
-        explore_pool_size = max(1, len(reranked_ids) - len(mmr_set))
-        n_actual_explore = len(exploration_set)
-        explore_propensity = n_actual_explore / explore_pool_size if explore_pool_size > 0 else 0.0
+        explore_pool = [aid for aid in reranked_ids if aid not in mmr_set]
 
+        # Phase 4.5 + 6.5: per-paper instrumentation, for the whole pool.
+        # candidate_source here is the RETRIEVAL origin; papers served as an
+        # exploration pick get that overridden at page-build time, since the
+        # same paper is an exploration pick only by virtue of how it was served.
         paper_tags: dict[str, dict] = {}
-        for aid in final:
+        for aid in mmr_selected + explore_pool:
             cluster_idx = paper_cluster_map.get(aid)
-            if aid in exploration_set:
-                source = "exploration"
-            elif cluster_idx == -1:
+            if cluster_idx == -1:
                 source = "short_term_supplement"
             elif cluster_idx is not None:
                 source = f"cluster_{cluster_idx}"
@@ -543,15 +695,15 @@ async def _multi_interest_recommend(
                 "candidate_source": source,
                 "cluster_id": str(cluster_idx) if cluster_idx is not None and cluster_idx >= 0 else "",
                 "query_id": query_id,
-                "propensity": explore_propensity if aid in exploration_set else 1.0,
+                "propensity": 1.0,          # deterministic unless served as exploration
                 "policy_id": _RANKER_VERSION,
             }
 
-        return final, paper_tags, rerank_time_ms, timing
+        return mmr_selected, explore_pool, paper_tags, rerank_time_ms, timing
 
     except Exception as e:
         print(f"[recommendations] multi-interest preprocessing failed: {e}")
-        return [], {}, 0, {}
+        return [], [], {}, 0, {}
 
 
 # ── Tier 2: EWMA single-vector search ────────────────────────────────────────

app/static/animations.css

@@ -1,149 +0,0 @@
-/* ═══════════════════════════════════════════════════════════════════════════
-   ResearchIT — Animations
-   All @keyframes and animation utility classes.
-   ═══════════════════════════════════════════════════════════════════════════ */
-
-/* ── Skeleton shimmer ─────────────────────────────────────────────────────── */
-@keyframes shimmer {
-  0%   { background-position: -200% 0; }
-  100% { background-position: 200% 0; }
-}
-
-/* ── Fade in with upward slide ────────────────────────────────────────────── */
-@keyframes fadeInUp {
-  from {
-    opacity: 0;
-    transform: translateY(10px);
-  }
-  to {
-    opacity: 1;
-    transform: translateY(0);
-  }
-}
-
-/* ── Fade in only ─────────────────────────────────────────────────────────── */
-@keyframes fadeIn {
-  from { opacity: 0; }
-  to   { opacity: 1; }
-}
-
-/* ── Toast slide in/out ───────────────────────────────────────────────────── */
-@keyframes toastIn {
-  from {
-    opacity: 0;
-    transform: translateX(40px) scale(0.95);
-  }
-  to {
-    opacity: 1;
-    transform: translateX(0) scale(1);
-  }
-}
-
-@keyframes toastOut {
-  from {
-    opacity: 1;
-    transform: translateX(0) scale(1);
-  }
-  to {
-    opacity: 0;
-    transform: translateX(40px) scale(0.95);
-  }
-}
-
-/* ── Save button pulse ────────────────────────────────────────────────────── */
-@keyframes savePulse {
-  0%   { transform: scale(1); }
-  40%  { transform: scale(1.12); }
-  100% { transform: scale(1); }
-}
-
-/* ── Checkmark pop (onboarding tile) ──────────────────────────────────────── */
-@keyframes checkPop {
-  0%   { transform: scale(0); }
-  60%  { transform: scale(1.2); }
-  100% { transform: scale(1); }
-}
-
-/* ── Loading dot pulse ────────────────────────────────────────────────────── */
-@keyframes dotPulse {
-  0%, 80%, 100% {
-    opacity: 0.3;
-    transform: scale(0.8);
-  }
-  40% {
-    opacity: 1;
-    transform: scale(1.1);
-  }
-}
-
-/* ── Card stagger entrance ────────────────────────────────────────────────── */
-@keyframes cardIn {
-  from {
-    opacity: 0;
-    transform: translateY(16px);
-  }
-  to {
-    opacity: 1;
-    transform: translateY(0);
-  }
-}
-
-/* ── Subtle glow pulse (hero, active elements) ────────────────────────────── */
-@keyframes glowPulse {
-  0%, 100% { opacity: 0.4; }
-  50%      { opacity: 0.7; }
-}
-
-/* ── Spin (loading indicators) ────────────────────────────────────────────── */
-@keyframes spin {
-  from { transform: rotate(0deg); }
-  to   { transform: rotate(360deg); }
-}
-
-/* ── Gradient shift (brand/hero background) ───────────────────────────────── */
-@keyframes gradientShift {
-  0%   { background-position: 0% 50%; }
-  50%  { background-position: 100% 50%; }
-  100% { background-position: 0% 50%; }
-}
-
-/* ══════════════════════════════════════════════════════════════════════════ */
-/* Utility animation classes                                                 */
-/* ══════════════════════════════════════════════════════════════════════════ */
-
-.animate-fade-in {
-  animation: fadeIn 0.3s ease-out;
-}
-
-.animate-fade-in-up {
-  animation: fadeInUp 0.4s ease-out;
-}
-
-.animate-card-in {
-  animation: cardIn 0.35s ease-out both;
-}
-
-/* Staggered card entrance — assign via inline style or nth-child */
-.animate-card-in:nth-child(1) { animation-delay: 0s; }
-.animate-card-in:nth-child(2) { animation-delay: 0.05s; }
-.animate-card-in:nth-child(3) { animation-delay: 0.1s; }
-.animate-card-in:nth-child(4) { animation-delay: 0.15s; }
-.animate-card-in:nth-child(5) { animation-delay: 0.2s; }
-.animate-card-in:nth-child(6) { animation-delay: 0.25s; }
-.animate-card-in:nth-child(7) { animation-delay: 0.3s; }
-.animate-card-in:nth-child(8) { animation-delay: 0.35s; }
-.animate-card-in:nth-child(9) { animation-delay: 0.4s; }
-.animate-card-in:nth-child(10) { animation-delay: 0.45s; }
-
-.animate-glow {
-  animation: glowPulse 3s ease-in-out infinite;
-}
-
-.animate-spin {
-  animation: spin 1s linear infinite;
-}
-
-.animate-gradient {
-  background-size: 200% 200%;
-  animation: gradientShift 4s ease infinite;
-}

app/static/app.js

@@ -1,282 +1,238 @@
 /* ═══════════════════════════════════════════════════════════════════════════
-   ResearchIT — Client-Side JavaScript
-   Theme toggle, toasts, progressive loading messages, optimistic UI,
-   abstract expand/collapse, HTMX event handlers.
+   ResearchIT — client script
+
+   Deliberately small. Everything that htmx can express in markup is left in
+   markup; this file covers only the three things it cannot:
+
+     1. theme persistence
+     2. progressive disclosure (abstract, "why this?")
+     3. DEFERRED DISMISSAL, which is the interesting one — see below
+
+   Removed from the previous version: the rotating "Encoding your query with
+   BGE-M3…" progress messages. They narrated the implementation to someone who
+   only wanted papers, and the skeleton already communicates "loading".
    ═══════════════════════════════════════════════════════════════════════════ */
 
-// ── Theme Toggle ─────────────────────────────────────────────────────────────
-
-function toggleTheme() {
-  const html = document.documentElement;
-  const current = html.getAttribute('data-theme');
-  const next = current === 'dark' ? 'light' : 'dark';
-  html.setAttribute('data-theme', next);
-  localStorage.setItem('researchit-theme', next);
-  updateThemeIcons();
-}
-
-function updateThemeIcons() {
-  const theme = document.documentElement.getAttribute('data-theme');
-  // Desktop icon
-  document.querySelectorAll('.theme-icon-sun').forEach(el => {
-    el.classList.toggle('hidden', theme !== 'dark');
-  });
-  document.querySelectorAll('.theme-icon-moon').forEach(el => {
-    el.classList.toggle('hidden', theme !== 'light');
-  });
-  // Mobile text
-  document.querySelectorAll('.theme-text-dark').forEach(el => {
-    el.classList.toggle('hidden', theme !== 'dark');
-  });
-  document.querySelectorAll('.theme-text-light').forEach(el => {
-    el.classList.toggle('hidden', theme !== 'light');
-  });
-}
+(function () {
+  'use strict';
 
-// ── Toast Notification System ────────────────────────────────────────────────
+  /* How long Undo stays available. Long enough to catch a misfire, short
+     enough that the pending queue never grows meaningfully. */
+  var UNDO_MS = 5000;
 
-function showToast(message, type = 'info', duration = 3000) {
-  const container = document.getElementById('toast-container');
-  if (!container) return;
+  /* ── Theme ─────────────────────────────────────────────────────────────
+     Only ever writes an explicit choice. With nothing stored the document
+     stays unstamped and follows prefers-color-scheme, so a user who has
+     never touched the toggle tracks their OS. Icon swapping is pure CSS. */
 
-  const iconMap = {
-    success: '✓',
-    error: '✕',
-    info: 'ℹ',
+  function currentTheme() {
+    var explicit = document.documentElement.getAttribute('data-theme');
+    if (explicit) return explicit;
+    return window.matchMedia &&
+      window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
+  }
+
+  window.toggleTheme = function () {
+    var next = currentTheme() === 'dark' ? 'light' : 'dark';
+    document.documentElement.setAttribute('data-theme', next);
+    try { localStorage.setItem('researchit-theme', next); } catch (e) { /* private mode */ }
+  };
+
+  /* ── Progressive disclosure ────────────────────────────────────────── */
+
+  window.toggleAbstract = function (btn) {
+    var p = document.getElementById(btn.getAttribute('aria-controls'));
+    if (!p) return;
+    var clamped = p.classList.toggle('is-clamped');
+    btn.setAttribute('aria-expanded', String(!clamped));
+    btn.textContent = clamped ? 'Read more' : 'Show less';
   };
 
-  const toast = document.createElement('div');
-  toast.className = `rit-toast rit-toast-${type}`;
-  toast.innerHTML = `
-    <span class="rit-toast-icon">${iconMap[type] || 'ℹ'}</span>
-    <span>${message}</span>
-  `;
-
-  container.appendChild(toast);
-
-  setTimeout(() => {
-    toast.classList.add('toast-exit');
-    toast.addEventListener('animationend', () => toast.remove());
-  }, duration);
-}
-
-// ── Progressive Loading Messages ─────────────────────────────────────────────
-
-class ProgressMessages {
-  constructor(containerId, messages) {
-    this.container = document.getElementById(containerId);
-    this.messages = messages || [
-      'Encoding your query with BGE-M3…',
-      'Searching across 1.6M papers…',
-      'Ranking the best matches for you…',
-      'Almost there — curating results…',
-    ];
-    this.index = 0;
-    this.timer = null;
+  window.toggleWhy = function (btn, id) {
+    var p = document.getElementById('why-' + id);
+    if (!p) return;
+    var hidden = p.classList.toggle('hidden');
+    btn.setAttribute('aria-expanded', String(!hidden));
+  };
+
+  /* ── Deferred dismissal + undo ─────────────────────────────────────────
+     The card is hidden immediately, but the POST is held for UNDO_MS. Undo
+     cancels the request rather than compensating for it.
+
+     Why not commit-then-reverse: a dismissal is folded into the user's
+     negative EWMA profile, and an EWMA is a lossy running average with no
+     exact inverse. A reversed dismissal would leave a permanent smudge on the
+     profile. Deferring keeps it out entirely.
+
+     NN/g's rule for repetitive destructive actions is undo over confirmation,
+     since a confirm dialog charges everyone who meant it. */
+
+  var pending = new Map();   // arxivId -> { timer, card, vals }
+
+  function endpointFor(id) {
+    return '/api/papers/' + encodeURIComponent(id) + '/not-interested';
   }
 
-  start(intervalMs = 2500) {
-    if (!this.container) return;
-    this.index = 0;
-    this._show();
-    this.timer = setInterval(() => {
-      this.index = Math.min(this.index + 1, this.messages.length - 1);
-      this._show();
-    }, intervalMs);
+  function payloadFor(vals) {
+    var body = new FormData();
+    Object.keys(vals || {}).forEach(function (k) {
+      if (vals[k] !== null && vals[k] !== undefined) body.append(k, vals[k]);
+    });
+    return body;
   }
 
-  stop() {
-    if (this.timer) {
-      clearInterval(this.timer);
-      this.timer = null;
-    }
+  function commitDismiss(id) {
+    var p = pending.get(id);
+    if (!p) return;
+    pending.delete(id);
+    fetch(endpointFor(id), { method: 'POST', body: payloadFor(p.vals) })
+      .catch(function () { /* the card is already gone; a lost dismissal is
+                              recoverable, an error dialog here is not worth it */ });
+    if (p.card && p.card.parentNode) p.card.remove();
+    topUpFeed();
   }
 
-  _show() {
-    if (!this.container) return;
-    this.container.innerHTML = `
-      <span class="rit-progress-msg">${this.messages[this.index]}
-        <span class="rit-progress-dots"><span></span><span></span><span></span></span>
-      </span>
-    `;
+  function undoDismiss(id) {
+    var p = pending.get(id);
+    if (!p) return;
+    clearTimeout(p.timer);
+    pending.delete(id);
+    if (p.card) p.card.classList.remove('is-leaving');
   }
-}
-
-// Global progress message instances
-let searchProgress = null;
-let recProgress = null;
-
-// ── Abstract Expand / Collapse ───────────────────────────────────────────────
-
-function toggleAbstract(btn) {
-  const card = btn.closest('.paper-card');
-  if (!card) return;
-  const abstract = card.querySelector('.abstract-text');
-  if (!abstract) return;
-
-  const isExpanded = abstract.classList.contains('expanded');
-  abstract.classList.toggle('expanded');
-  btn.textContent = isExpanded ? '↓ Show more' : '↑ Show less';
-}
-
-// ── Coming Soon Click Handler ────────────────────────────────────────────────
-
-function handleComingSoon(e) {
-  e.preventDefault();
-  e.stopPropagation();
-  showToast('This feature is coming soon!', 'info', 2500);
-}
-
-// ── Search Loading State ─────────────────────────────────────────────────────
-
-function initSearchHandlers() {
-  const searchForm = document.getElementById('search-form');
-  if (!searchForm) return;
-
-  searchProgress = new ProgressMessages('search-progress-msgs', [
-    'Rewriting query with Groq AI…',
-    'Encoding with BGE-M3 embeddings…',
-    'Searching Qdrant + Zilliz vectors…',
-    'Fusing results with RRF…',
-    'Reranking the best matches…',
-    'Almost there…',
-  ]);
-}
-
-// ── Recommendation Loading State ─────────────────────────────────────────────
-
-function initRecHandlers() {
-  recProgress = new ProgressMessages('rec-progress-msgs', [
-    'Analyzing your interest clusters…',
-    'Searching across 1.6M papers…',
-    'Running LightGBM reranker…',
-    'Diversifying with MMR…',
-    'Curating your personal feed…',
-  ]);
-}
-
-// ── HTMX Global Event Handlers ───────────────────────────────────────��───────
-
-document.addEventListener('DOMContentLoaded', function () {
-  updateThemeIcons();
-  initSearchHandlers();
-  initRecHandlers();
-
-  // ── Before HTMX Request ──────────────────────────────────────────────────
-  document.body.addEventListener('htmx:beforeRequest', function (evt) {
-    const target = evt.detail.target;
-    if (!target) return;
-
-    // Search results loading
-    if (target.id === 'search-results') {
-      const loadingEl = document.getElementById('search-loading');
-      const resultsEl = document.getElementById('search-results');
-      if (loadingEl) loadingEl.classList.remove('hidden');
-      if (resultsEl) resultsEl.classList.add('opacity-20', 'pointer-events-none');
-      // Hide recs
-      const recWrapper = document.getElementById('rec-wrapper');
-      if (recWrapper) recWrapper.classList.add('hidden');
-      // Swap button text
-      document.querySelectorAll('.search-btn-text').forEach(el => el.classList.add('hidden'));
-      document.querySelectorAll('.search-btn-loading').forEach(el => el.classList.remove('hidden'));
-      // Start progress messages
-      if (searchProgress) searchProgress.start(2000);
-    }
 
-    // Recommendations loading
-    if (target.id === 'rec-section') {
-      if (recProgress) recProgress.start(2000);
-    }
-  });
+  function dismissPaper(btn) {
+    var id = btn.getAttribute('data-paper-id');
+    if (!id || pending.has(id)) return;
+    var card = btn.closest('.card');
+    if (!card) return;
 
-  // ── After HTMX Request (success or error) ────────────────────────────────
-  document.body.addEventListener('htmx:afterRequest', function (evt) {
-    const target = evt.detail.target;
-    if (!target) return;
-
-    // Search results loaded
-    if (target.id === 'search-results') {
-      const loadingEl = document.getElementById('search-loading');
-      const resultsEl = document.getElementById('search-results');
-      if (loadingEl) loadingEl.classList.add('hidden');
-      if (resultsEl) resultsEl.classList.remove('opacity-20', 'pointer-events-none');
-      // Restore button
-      document.querySelectorAll('.search-btn-text').forEach(el => el.classList.remove('hidden'));
-      document.querySelectorAll('.search-btn-loading').forEach(el => el.classList.add('hidden'));
-      // Stop progress messages
-      if (searchProgress) searchProgress.stop();
-    }
+    var vals = {};
+    try { vals = JSON.parse(btn.getAttribute('data-vals') || '{}'); } catch (e) { vals = {}; }
 
-    // Recommendations loaded
-    if (target.id === 'rec-section') {
-      if (recProgress) recProgress.stop();
-    }
-  });
+    card.classList.add('is-leaving');
+    pending.set(id, {
+      card: card,
+      vals: vals,
+      timer: setTimeout(function () { commitDismiss(id); }, UNDO_MS)
+    });
+    showUndoToast(id);
+  }
 
-  // ── HTMX Error Handler ─────────────────────────────────────────────────
-  document.body.addEventListener('htmx:responseError', function (evt) {
-    const target = evt.detail.target;
-    if (target) {
-      // Show friendly error for search/rec failures
-      if (target.id === 'search-results' || target.id === 'rec-section') {
-        target.innerHTML = `
-          <div class="rit-error-state">
-            <div class="text-3xl mb-3 opacity-70">⚡</div>
-            <p class="font-medium mb-1">Our servers are thinking extra hard</p>
-            <p class="text-sm opacity-60 mb-4">The request took longer than expected. Please try again.</p>
-            <button class="btn btn-primary btn-sm" onclick="location.reload()">
-              ↻ Try again
-            </button>
-          </div>
-        `;
-      }
-      // Stop any progress messages
-      if (searchProgress) searchProgress.stop();
-      if (recProgress) recProgress.stop();
-    }
-  });
+  /* Leaving the page with dismissals still pending would silently drop them.
+     sendBeacon survives unload, unlike fetch. */
+  function flushPending() {
+    pending.forEach(function (p, id) {
+      clearTimeout(p.timer);
+      if (navigator.sendBeacon) navigator.sendBeacon(endpointFor(id), payloadFor(p.vals));
+    });
+    pending.clear();
+  }
+  window.addEventListener('pagehide', flushPending);
 
-  // ── Optimistic Save Feedback ─────────────────────────────────────────────
-  // After a save action completes, show a toast
-  document.body.addEventListener('htmx:afterSwap', function (evt) {
-    const target = evt.detail.target;
-    if (!target) return;
-
-    // Check if this was a save action (the target id starts with 'actions-')
-    if (target.id && target.id.startsWith('actions-')) {
-      // Check if it now contains a "saved" state
-      const savedBtn = target.querySelector('.rit-btn-save.saved, .btn-success');
-      if (savedBtn) {
-        savedBtn.classList.add('save-success');
-        showToast('Paper saved to your library', 'success', 2500);
-      }
-    }
+  /* ── Toasts ────────────────────────────────────────────────────────── */
 
-    // Card dismissed (card removed from DOM)
-    if (target.id && target.id.startsWith('paper-') && target.innerHTML.trim() === '') {
-      showToast('Paper dismissed', 'info', 2000);
-    }
-  });
+  function closeToast(el) {
+    if (!el || el.classList.contains('is-out')) return;
+    el.classList.add('is-out');
+    setTimeout(function () { if (el.parentNode) el.remove(); }, 200);
+  }
+
+  function makeToast(message) {
+    var host = document.getElementById('toasts');
+    if (!host) return null;
+    var t = document.createElement('div');
+    t.className = 'toast';
+    var msg = document.createElement('span');
+    msg.className = 'msg';
+    msg.textContent = message;          // textContent, never innerHTML
+    t.appendChild(msg);
+    host.appendChild(t);
+    return t;
+  }
 
-  // ── Mobile Menu Toggle ─────────────────────────────────────────────────
-  const menuToggle = document.querySelector('.mobile-menu-toggle');
-  if (menuToggle) {
-    menuToggle.addEventListener('change', function () {
-      const menu = this.closest('.flex-none').querySelector('.mobile-menu');
-      if (menu) {
-        menu.style.display = this.checked ? 'flex' : 'none';
-      }
+  function showUndoToast(id) {
+    var t = makeToast('Removed from your feed');
+    if (!t) return;
+    var undo = document.createElement('button');
+    undo.type = 'button';
+    undo.className = 'undo';
+    undo.textContent = 'Undo';
+    undo.addEventListener('click', function () {
+      undoDismiss(id);
+      closeToast(t);
     });
+    t.appendChild(undo);
+    setTimeout(function () { closeToast(t); }, UNDO_MS);
+  }
+
+  function showError(message) {
+    var t = makeToast(message);
+    if (t) setTimeout(function () { closeToast(t); }, 4000);
   }
 
-  // ── Set Active Nav Link ────────────────────────────────────────────────
-  const path = window.location.pathname;
-  document.querySelectorAll('.rit-nav-link, .rit-bottom-nav-item').forEach(link => {
-    const href = link.getAttribute('href');
-    if (href === path || (href === '/' && path === '/')) {
-      link.classList.add('active');
-    } else if (href !== '/' && path.startsWith(href)) {
-      link.classList.add('active');
+  /* ── Infinite scroll ───────────────────────────────────────────────────
+     The loader button carries only hx-trigger="click"; this observer supplies
+     the scroll half by clicking it when it comes near the viewport.
+
+     Both htmx built-ins were tried against the deployed build first and are
+     documented in rec_page.html: `revealed` cannot fire when combined with a
+     second trigger (htmx's poller matches the attribute exactly), and
+     `intersect once` wired its handler but never fired on real scrolling.
+     Owning the observer is deterministic and testable.
+
+     rootMargin pre-loads a screen early so the next page is usually already
+     in place by the time the user reaches the bottom. */
+
+  var feedObserver = null;
+
+  function watchLoader() {
+    var more = document.querySelector('.feed-more');
+    if (!more) return;
+    if (!feedObserver) {
+      feedObserver = new IntersectionObserver(function (entries) {
+        entries.forEach(function (e) {
+          if (!e.isIntersecting) return;
+          var el = e.target;
+          feedObserver.unobserve(el);           // one shot per loader
+          if (!el.classList.contains('htmx-request')) el.click();
+        });
+      }, { rootMargin: '800px 0px' });
     }
+    if (more.dataset.watched !== '1') {
+      more.dataset.watched = '1';
+      feedObserver.observe(more);
+    }
+  }
+
+  /* Each appended page brings its own loader, so re-arm after every swap. */
+  document.body.addEventListener('htmx:afterSwap', watchLoader);
+  document.addEventListener('DOMContentLoaded', watchLoader);
+  watchLoader();
+
+  /* ── Keep the feed populated ───────────────────────────────────────────
+     Dismissing shrinks the list. Without this the feed drains toward empty
+     as the user triages, which is the opposite of what a feed should do. */
+
+  function topUpFeed() {
+    var feed = document.querySelector('.feed');
+    if (!feed) return;
+    if (feed.querySelectorAll('.card:not(.is-leaving)').length > 3) return;
+    var more = document.querySelector('.feed-more');
+    if (more && !more.classList.contains('htmx-request')) more.click();
+  }
+
+  /* ── Wiring ────────────────────────────────────────────────────────────
+     Delegated so htmx-appended pages need no re-binding. */
+
+  document.addEventListener('click', function (e) {
+    var btn = e.target.closest && e.target.closest('[data-dismiss]');
+    if (btn) { e.preventDefault(); dismissPaper(btn); }
+  });
+
+  document.body.addEventListener('htmx:responseError', function () {
+    showError('Something went wrong. Please try again.');
+  });
+  document.body.addEventListener('htmx:sendError', function () {
+    showError('Connection lost. Check your network.');
   });
-});
+})();

app/static/htmx.min.js

@@ -0,0 +1 @@
+(function(e,t){if(typeof define==="function"&&define.amd){define([],t)}else if(typeof module==="object"&&module.exports){module.exports=t()}else{e.htmx=e.htmx||t()}})(typeof self!=="undefined"?self:this,function(){return function(){"use strict";var Q={onLoad:F,process:zt,on:de,off:ge,trigger:ce,ajax:Nr,find:C,findAll:f,closest:v,values:function(e,t){var r=dr(e,t||"post");return r.values},remove:_,addClass:z,removeClass:n,toggleClass:$,takeClass:W,defineExtension:Ur,removeExtension:Br,logAll:V,logNone:j,logger:null,config:{historyEnabled:true,historyCacheSize:10,refreshOnHistoryMiss:false,defaultSwapStyle:"innerHTML",defaultSwapDelay:0,defaultSettleDelay:20,includeIndicatorStyles:true,indicatorClass:"htmx-indicator",requestClass:"htmx-request",addedClass:"htmx-added",settlingClass:"htmx-settling",swappingClass:"htmx-swapping",allowEval:true,allowScriptTags:true,inlineScriptNonce:"",attributesToSettle:["class","style","width","height"],withCredentials:false,timeout:0,wsReconnectDelay:"full-jitter",wsBinaryType:"blob",disableSelector:"[hx-disable], [data-hx-disable]",useTemplateFragments:false,scrollBehavior:"smooth",defaultFocusScroll:false,getCacheBusterParam:false,globalViewTransitions:false,methodsThatUseUrlParams:["get"],selfRequestsOnly:false,ignoreTitle:false,scrollIntoViewOnBoost:true,triggerSpecsCache:null},parseInterval:d,_:t,createEventSource:function(e){return new EventSource(e,{withCredentials:true})},createWebSocket:function(e){var t=new WebSocket(e,[]);t.binaryType=Q.config.wsBinaryType;return t},version:"1.9.12"};var r={addTriggerHandler:Lt,bodyContains:se,canAccessLocalStorage:U,findThisElement:xe,filterValues:yr,hasAttribute:o,getAttributeValue:te,getClosestAttributeValue:ne,getClosestMatch:c,getExpressionVars:Hr,getHeaders:xr,getInputValues:dr,getInternalData:ae,getSwapSpecification:wr,getTriggerSpecs:it,getTarget:ye,makeFragment:l,mergeObjects:le,makeSettleInfo:T,oobSwap:Ee,querySelectorExt:ue,selectAndSwap:je,settleImmediately:nr,shouldCancel:ut,triggerEvent:ce,triggerErrorEvent:fe,withExtensions:R};var w=["get","post","put","delete","patch"];var i=w.map(function(e){return"[hx-"+e+"], [data-hx-"+e+"]"}).join(", ");var S=e("head"),q=e("title"),H=e("svg",true);function e(e,t){return new RegExp("<"+e+"(\\s[^>]*>|>)([\\s\\S]*?)<\\/"+e+">",!!t?"gim":"im")}function d(e){if(e==undefined){return undefined}let t=NaN;if(e.slice(-2)=="ms"){t=parseFloat(e.slice(0,-2))}else if(e.slice(-1)=="s"){t=parseFloat(e.slice(0,-1))*1e3}else if(e.slice(-1)=="m"){t=parseFloat(e.slice(0,-1))*1e3*60}else{t=parseFloat(e)}return isNaN(t)?undefined:t}function ee(e,t){return e.getAttribute&&e.getAttribute(t)}function o(e,t){return e.hasAttribute&&(e.hasAttribute(t)||e.hasAttribute("data-"+t))}function te(e,t){return ee(e,t)||ee(e,"data-"+t)}function u(e){return e.parentElement}function re(){return document}function c(e,t){while(e&&!t(e)){e=u(e)}return e?e:null}function L(e,t,r){var n=te(t,r);var i=te(t,"hx-disinherit");if(e!==t&&i&&(i==="*"||i.split(" ").indexOf(r)>=0)){return"unset"}else{return n}}function ne(t,r){var n=null;c(t,function(e){return n=L(t,e,r)});if(n!=="unset"){return n}}function h(e,t){var r=e.matches||e.matchesSelector||e.msMatchesSelector||e.mozMatchesSelector||e.webkitMatchesSelector||e.oMatchesSelector;return r&&r.call(e,t)}function A(e){var t=/<([a-z][^\/\0>\x20\t\r\n\f]*)/i;var r=t.exec(e);if(r){return r[1].toLowerCase()}else{return""}}function s(e,t){var r=new DOMParser;var n=r.parseFromString(e,"text/html");var i=n.body;while(t>0){t--;i=i.firstChild}if(i==null){i=re().createDocumentFragment()}return i}function N(e){return/<body/.test(e)}function l(e){var t=!N(e);var r=A(e);var n=e;if(r==="head"){n=n.replace(S,"")}if(Q.config.useTemplateFragments&&t){var i=s("<body><template>"+n+"</template></body>",0);var a=i.querySelector("template").content;if(Q.config.allowScriptTags){oe(a.querySelectorAll("script"),function(e){if(Q.config.inlineScriptNonce){e.nonce=Q.config.inlineScriptNonce}e.htmxExecuted=navigator.userAgent.indexOf("Firefox")===-1})}else{oe(a.querySelectorAll("script"),function(e){_(e)})}return a}switch(r){case"thead":case"tbody":case"tfoot":case"colgroup":case"caption":return s("<table>"+n+"</table>",1);case"col":return s("<table><colgroup>"+n+"</colgroup></table>",2);case"tr":return s("<table><tbody>"+n+"</tbody></table>",2);case"td":case"th":return s("<table><tbody><tr>"+n+"</tr></tbody></table>",3);case"script":case"style":return s("<div>"+n+"</div>",1);default:return s(n,0)}}function ie(e){if(e){e()}}function I(e,t){return Object.prototype.toString.call(e)==="[object "+t+"]"}function k(e){return I(e,"Function")}function P(e){return I(e,"Object")}function ae(e){var t="htmx-internal-data";var r=e[t];if(!r){r=e[t]={}}return r}function M(e){var t=[];if(e){for(var r=0;r<e.length;r++){t.push(e[r])}}return t}function oe(e,t){if(e){for(var r=0;r<e.length;r++){t(e[r])}}}function X(e){var t=e.getBoundingClientRect();var r=t.top;var n=t.bottom;return r<window.innerHeight&&n>=0}function se(e){if(e.getRootNode&&e.getRootNode()instanceof window.ShadowRoot){return re().body.contains(e.getRootNode().host)}else{return re().body.contains(e)}}function D(e){return e.trim().split(/\s+/)}function le(e,t){for(var r in t){if(t.hasOwnProperty(r)){e[r]=t[r]}}return e}function E(e){try{return JSON.parse(e)}catch(e){b(e);return null}}function U(){var e="htmx:localStorageTest";try{localStorage.setItem(e,e);localStorage.removeItem(e);return true}catch(e){return false}}function B(t){try{var e=new URL(t);if(e){t=e.pathname+e.search}if(!/^\/$/.test(t)){t=t.replace(/\/+$/,"")}return t}catch(e){return t}}function t(e){return Tr(re().body,function(){return eval(e)})}function F(t){var e=Q.on("htmx:load",function(e){t(e.detail.elt)});return e}function V(){Q.logger=function(e,t,r){if(console){console.log(t,e,r)}}}function j(){Q.logger=null}function C(e,t){if(t){return e.querySelector(t)}else{return C(re(),e)}}function f(e,t){if(t){return e.querySelectorAll(t)}else{return f(re(),e)}}function _(e,t){e=p(e);if(t){setTimeout(function(){_(e);e=null},t)}else{e.parentElement.removeChild(e)}}function z(e,t,r){e=p(e);if(r){setTimeout(function(){z(e,t);e=null},r)}else{e.classList&&e.classList.add(t)}}function n(e,t,r){e=p(e);if(r){setTimeout(function(){n(e,t);e=null},r)}else{if(e.classList){e.classList.remove(t);if(e.classList.length===0){e.removeAttribute("class")}}}}function $(e,t){e=p(e);e.classList.toggle(t)}function W(e,t){e=p(e);oe(e.parentElement.children,function(e){n(e,t)});z(e,t)}function v(e,t){e=p(e);if(e.closest){return e.closest(t)}else{do{if(e==null||h(e,t)){return e}}while(e=e&&u(e));return null}}function g(e,t){return e.substring(0,t.length)===t}function G(e,t){return e.substring(e.length-t.length)===t}function J(e){var t=e.trim();if(g(t,"<")&&G(t,"/>")){return t.substring(1,t.length-2)}else{return t}}function Z(e,t){if(t.indexOf("closest ")===0){return[v(e,J(t.substr(8)))]}else if(t.indexOf("find ")===0){return[C(e,J(t.substr(5)))]}else if(t==="next"){return[e.nextElementSibling]}else if(t.indexOf("next ")===0){return[K(e,J(t.substr(5)))]}else if(t==="previous"){return[e.previousElementSibling]}else if(t.indexOf("previous ")===0){return[Y(e,J(t.substr(9)))]}else if(t==="document"){return[document]}else if(t==="window"){return[window]}else if(t==="body"){return[document.body]}else{return re().querySelectorAll(J(t))}}var K=function(e,t){var r=re().querySelectorAll(t);for(var n=0;n<r.length;n++){var i=r[n];if(i.compareDocumentPosition(e)===Node.DOCUMENT_POSITION_PRECEDING){return i}}};var Y=function(e,t){var r=re().querySelectorAll(t);for(var n=r.length-1;n>=0;n--){var i=r[n];if(i.compareDocumentPosition(e)===Node.DOCUMENT_POSITION_FOLLOWING){return i}}};function ue(e,t){if(t){return Z(e,t)[0]}else{return Z(re().body,e)[0]}}function p(e){if(I(e,"String")){return C(e)}else{return e}}function ve(e,t,r){if(k(t)){return{target:re().body,event:e,listener:t}}else{return{target:p(e),event:t,listener:r}}}function de(t,r,n){jr(function(){var e=ve(t,r,n);e.target.addEventListener(e.event,e.listener)});var e=k(r);return e?r:n}function ge(t,r,n){jr(function(){var e=ve(t,r,n);e.target.removeEventListener(e.event,e.listener)});return k(r)?r:n}var pe=re().createElement("output");function me(e,t){var r=ne(e,t);if(r){if(r==="this"){return[xe(e,t)]}else{var n=Z(e,r);if(n.length===0){b('The selector "'+r+'" on '+t+" returned no matches!");return[pe]}else{return n}}}}function xe(e,t){return c(e,function(e){return te(e,t)!=null})}function ye(e){var t=ne(e,"hx-target");if(t){if(t==="this"){return xe(e,"hx-target")}else{return ue(e,t)}}else{var r=ae(e);if(r.boosted){return re().body}else{return e}}}function be(e){var t=Q.config.attributesToSettle;for(var r=0;r<t.length;r++){if(e===t[r]){return true}}return false}function we(t,r){oe(t.attributes,function(e){if(!r.hasAttribute(e.name)&&be(e.name)){t.removeAttribute(e.name)}});oe(r.attributes,function(e){if(be(e.name)){t.setAttribute(e.name,e.value)}})}function Se(e,t){var r=Fr(t);for(var n=0;n<r.length;n++){var i=r[n];try{if(i.isInlineSwap(e)){return true}}catch(e){b(e)}}return e==="outerHTML"}function Ee(e,i,a){var t="#"+ee(i,"id");var o="outerHTML";if(e==="true"){}else if(e.indexOf(":")>0){o=e.substr(0,e.indexOf(":"));t=e.substr(e.indexOf(":")+1,e.length)}else{o=e}var r=re().querySelectorAll(t);if(r){oe(r,function(e){var t;var r=i.cloneNode(true);t=re().createDocumentFragment();t.appendChild(r);if(!Se(o,e)){t=r}var n={shouldSwap:true,target:e,fragment:t};if(!ce(e,"htmx:oobBeforeSwap",n))return;e=n.target;if(n["shouldSwap"]){Fe(o,e,e,t,a)}oe(a.elts,function(e){ce(e,"htmx:oobAfterSwap",n)})});i.parentNode.removeChild(i)}else{i.parentNode.removeChild(i);fe(re().body,"htmx:oobErrorNoTarget",{content:i})}return e}function Ce(e,t,r){var n=ne(e,"hx-select-oob");if(n){var i=n.split(",");for(var a=0;a<i.length;a++){var o=i[a].split(":",2);var s=o[0].trim();if(s.indexOf("#")===0){s=s.substring(1)}var l=o[1]||"true";var u=t.querySelector("#"+s);if(u){Ee(l,u,r)}}}oe(f(t,"[hx-swap-oob], [data-hx-swap-oob]"),function(e){var t=te(e,"hx-swap-oob");if(t!=null){Ee(t,e,r)}})}function Re(e){oe(f(e,"[hx-preserve], [data-hx-preserve]"),function(e){var t=te(e,"id");var r=re().getElementById(t);if(r!=null){e.parentNode.replaceChild(r,e)}})}function Te(o,e,s){oe(e.querySelectorAll("[id]"),function(e){var t=ee(e,"id");if(t&&t.length>0){var r=t.replace("'","\\'");var n=e.tagName.replace(":","\\:");var i=o.querySelector(n+"[id='"+r+"']");if(i&&i!==o){var a=e.cloneNode();we(e,i);s.tasks.push(function(){we(e,a)})}}})}function Oe(e){return function(){n(e,Q.config.addedClass);zt(e);Nt(e);qe(e);ce(e,"htmx:load")}}function qe(e){var t="[autofocus]";var r=h(e,t)?e:e.querySelector(t);if(r!=null){r.focus()}}function a(e,t,r,n){Te(e,r,n);while(r.childNodes.length>0){var i=r.firstChild;z(i,Q.config.addedClass);e.insertBefore(i,t);if(i.nodeType!==Node.TEXT_NODE&&i.nodeType!==Node.COMMENT_NODE){n.tasks.push(Oe(i))}}}function He(e,t){var r=0;while(r<e.length){t=(t<<5)-t+e.charCodeAt(r++)|0}return t}function Le(e){var t=0;if(e.attributes){for(var r=0;r<e.attributes.length;r++){var n=e.attributes[r];if(n.value){t=He(n.name,t);t=He(n.value,t)}}}return t}function Ae(e){var t=ae(e);if(t.onHandlers){for(var r=0;r<t.onHandlers.length;r++){const n=t.onHandlers[r];e.removeEventListener(n.event,n.listener)}delete t.onHandlers}}function Ne(e){var t=ae(e);if(t.timeout){clearTimeout(t.timeout)}if(t.webSocket){t.webSocket.close()}if(t.sseEventSource){t.sseEventSource.close()}if(t.listenerInfos){oe(t.listenerInfos,function(e){if(e.on){e.on.removeEventListener(e.trigger,e.listener)}})}Ae(e);oe(Object.keys(t),function(e){delete t[e]})}function m(e){ce(e,"htmx:beforeCleanupElement");Ne(e);if(e.children){oe(e.children,function(e){m(e)})}}function Ie(t,e,r){if(t.tagName==="BODY"){return Ue(t,e,r)}else{var n;var i=t.previousSibling;a(u(t),t,e,r);if(i==null){n=u(t).firstChild}else{n=i.nextSibling}r.elts=r.elts.filter(function(e){return e!=t});while(n&&n!==t){if(n.nodeType===Node.ELEMENT_NODE){r.elts.push(n)}n=n.nextElementSibling}m(t);u(t).removeChild(t)}}function ke(e,t,r){return a(e,e.firstChild,t,r)}function Pe(e,t,r){return a(u(e),e,t,r)}function Me(e,t,r){return a(e,null,t,r)}function Xe(e,t,r){return a(u(e),e.nextSibling,t,r)}function De(e,t,r){m(e);return u(e).removeChild(e)}function Ue(e,t,r){var n=e.firstChild;a(e,n,t,r);if(n){while(n.nextSibling){m(n.nextSibling);e.removeChild(n.nextSibling)}m(n);e.removeChild(n)}}function Be(e,t,r){var n=r||ne(e,"hx-select");if(n){var i=re().createDocumentFragment();oe(t.querySelectorAll(n),function(e){i.appendChild(e)});t=i}return t}function Fe(e,t,r,n,i){switch(e){case"none":return;case"outerHTML":Ie(r,n,i);return;case"afterbegin":ke(r,n,i);return;case"beforebegin":Pe(r,n,i);return;case"beforeend":Me(r,n,i);return;case"afterend":Xe(r,n,i);return;case"delete":De(r,n,i);return;default:var a=Fr(t);for(var o=0;o<a.length;o++){var s=a[o];try{var l=s.handleSwap(e,r,n,i);if(l){if(typeof l.length!=="undefined"){for(var u=0;u<l.length;u++){var f=l[u];if(f.nodeType!==Node.TEXT_NODE&&f.nodeType!==Node.COMMENT_NODE){i.tasks.push(Oe(f))}}}return}}catch(e){b(e)}}if(e==="innerHTML"){Ue(r,n,i)}else{Fe(Q.config.defaultSwapStyle,t,r,n,i)}}}function Ve(e){if(e.indexOf("<title")>-1){var t=e.replace(H,"");var r=t.match(q);if(r){return r[2]}}}function je(e,t,r,n,i,a){i.title=Ve(n);var o=l(n);if(o){Ce(r,o,i);o=Be(r,o,a);Re(o);return Fe(e,r,t,o,i)}}function _e(e,t,r){var n=e.getResponseHeader(t);if(n.indexOf("{")===0){var i=E(n);for(var a in i){if(i.hasOwnProperty(a)){var o=i[a];if(!P(o)){o={value:o}}ce(r,a,o)}}}else{var s=n.split(",");for(var l=0;l<s.length;l++){ce(r,s[l].trim(),[])}}}var ze=/\s/;var x=/[\s,]/;var $e=/[_$a-zA-Z]/;var We=/[_$a-zA-Z0-9]/;var Ge=['"',"'","/"];var Je=/[^\s]/;var Ze=/[{(]/;var Ke=/[})]/;function Ye(e){var t=[];var r=0;while(r<e.length){if($e.exec(e.charAt(r))){var n=r;while(We.exec(e.charAt(r+1))){r++}t.push(e.substr(n,r-n+1))}else if(Ge.indexOf(e.charAt(r))!==-1){var i=e.charAt(r);var n=r;r++;while(r<e.length&&e.charAt(r)!==i){if(e.charAt(r)==="\\"){r++}r++}t.push(e.substr(n,r-n+1))}else{var a=e.charAt(r);t.push(a)}r++}return t}function Qe(e,t,r){return $e.exec(e.charAt(0))&&e!=="true"&&e!=="false"&&e!=="this"&&e!==r&&t!=="."}function et(e,t,r){if(t[0]==="["){t.shift();var n=1;var i=" return (function("+r+"){ return (";var a=null;while(t.length>0){var o=t[0];if(o==="]"){n--;if(n===0){if(a===null){i=i+"true"}t.shift();i+=")})";try{var s=Tr(e,function(){return Function(i)()},function(){return true});s.source=i;return s}catch(e){fe(re().body,"htmx:syntax:error",{error:e,source:i});return null}}}else if(o==="["){n++}if(Qe(o,a,r)){i+="(("+r+"."+o+") ? ("+r+"."+o+") : (window."+o+"))"}else{i=i+o}a=t.shift()}}}function y(e,t){var r="";while(e.length>0&&!t.test(e[0])){r+=e.shift()}return r}function tt(e){var t;if(e.length>0&&Ze.test(e[0])){e.shift();t=y(e,Ke).trim();e.shift()}else{t=y(e,x)}return t}var rt="input, textarea, select";function nt(e,t,r){var n=[];var i=Ye(t);do{y(i,Je);var a=i.length;var o=y(i,/[,\[\s]/);if(o!==""){if(o==="every"){var s={trigger:"every"};y(i,Je);s.pollInterval=d(y(i,/[,\[\s]/));y(i,Je);var l=et(e,i,"event");if(l){s.eventFilter=l}n.push(s)}else if(o.indexOf("sse:")===0){n.push({trigger:"sse",sseEvent:o.substr(4)})}else{var u={trigger:o};var l=et(e,i,"event");if(l){u.eventFilter=l}while(i.length>0&&i[0]!==","){y(i,Je);var f=i.shift();if(f==="changed"){u.changed=true}else if(f==="once"){u.once=true}else if(f==="consume"){u.consume=true}else if(f==="delay"&&i[0]===":"){i.shift();u.delay=d(y(i,x))}else if(f==="from"&&i[0]===":"){i.shift();if(Ze.test(i[0])){var c=tt(i)}else{var c=y(i,x);if(c==="closest"||c==="find"||c==="next"||c==="previous"){i.shift();var h=tt(i);if(h.length>0){c+=" "+h}}}u.from=c}else if(f==="target"&&i[0]===":"){i.shift();u.target=tt(i)}else if(f==="throttle"&&i[0]===":"){i.shift();u.throttle=d(y(i,x))}else if(f==="queue"&&i[0]===":"){i.shift();u.queue=y(i,x)}else if(f==="root"&&i[0]===":"){i.shift();u[f]=tt(i)}else if(f==="threshold"&&i[0]===":"){i.shift();u[f]=y(i,x)}else{fe(e,"htmx:syntax:error",{token:i.shift()})}}n.push(u)}}if(i.length===a){fe(e,"htmx:syntax:error",{token:i.shift()})}y(i,Je)}while(i[0]===","&&i.shift());if(r){r[t]=n}return n}function it(e){var t=te(e,"hx-trigger");var r=[];if(t){var n=Q.config.triggerSpecsCache;r=n&&n[t]||nt(e,t,n)}if(r.length>0){return r}else if(h(e,"form")){return[{trigger:"submit"}]}else if(h(e,'input[type="button"], input[type="submit"]')){return[{trigger:"click"}]}else if(h(e,rt)){return[{trigger:"change"}]}else{return[{trigger:"click"}]}}function at(e){ae(e).cancelled=true}function ot(e,t,r){var n=ae(e);n.timeout=setTimeout(function(){if(se(e)&&n.cancelled!==true){if(!ct(r,e,Wt("hx:poll:trigger",{triggerSpec:r,target:e}))){t(e)}ot(e,t,r)}},r.pollInterval)}function st(e){return location.hostname===e.hostname&&ee(e,"href")&&ee(e,"href").indexOf("#")!==0}function lt(t,r,e){if(t.tagName==="A"&&st(t)&&(t.target===""||t.target==="_self")||t.tagName==="FORM"){r.boosted=true;var n,i;if(t.tagName==="A"){n="get";i=ee(t,"href")}else{var a=ee(t,"method");n=a?a.toLowerCase():"get";if(n==="get"){}i=ee(t,"action")}e.forEach(function(e){ht(t,function(e,t){if(v(e,Q.config.disableSelector)){m(e);return}he(n,i,e,t)},r,e,true)})}}function ut(e,t){if(e.type==="submit"||e.type==="click"){if(t.tagName==="FORM"){return true}if(h(t,'input[type="submit"], button')&&v(t,"form")!==null){return true}if(t.tagName==="A"&&t.href&&(t.getAttribute("href")==="#"||t.getAttribute("href").indexOf("#")!==0)){return true}}return false}function ft(e,t){return ae(e).boosted&&e.tagName==="A"&&t.type==="click"&&(t.ctrlKey||t.metaKey)}function ct(e,t,r){var n=e.eventFilter;if(n){try{return n.call(t,r)!==true}catch(e){fe(re().body,"htmx:eventFilter:error",{error:e,source:n.source});return true}}return false}function ht(a,o,e,s,l){var u=ae(a);var t;if(s.from){t=Z(a,s.from)}else{t=[a]}if(s.changed){t.forEach(function(e){var t=ae(e);t.lastValue=e.value})}oe(t,function(n){var i=function(e){if(!se(a)){n.removeEventListener(s.trigger,i);return}if(ft(a,e)){return}if(l||ut(e,a)){e.preventDefault()}if(ct(s,a,e)){return}var t=ae(e);t.triggerSpec=s;if(t.handledFor==null){t.handledFor=[]}if(t.handledFor.indexOf(a)<0){t.handledFor.push(a);if(s.consume){e.stopPropagation()}if(s.target&&e.target){if(!h(e.target,s.target)){return}}if(s.once){if(u.triggeredOnce){return}else{u.triggeredOnce=true}}if(s.changed){var r=ae(n);if(r.lastValue===n.value){return}r.lastValue=n.value}if(u.delayed){clearTimeout(u.delayed)}if(u.throttle){return}if(s.throttle>0){if(!u.throttle){o(a,e);u.throttle=setTimeout(function(){u.throttle=null},s.throttle)}}else if(s.delay>0){u.delayed=setTimeout(function(){o(a,e)},s.delay)}else{ce(a,"htmx:trigger");o(a,e)}}};if(e.listenerInfos==null){e.listenerInfos=[]}e.listenerInfos.push({trigger:s.trigger,listener:i,on:n});n.addEventListener(s.trigger,i)})}var vt=false;var dt=null;function gt(){if(!dt){dt=function(){vt=true};window.addEventListener("scroll",dt);setInterval(function(){if(vt){vt=false;oe(re().querySelectorAll("[hx-trigger='revealed'],[data-hx-trigger='revealed']"),function(e){pt(e)})}},200)}}function pt(t){if(!o(t,"data-hx-revealed")&&X(t)){t.setAttribute("data-hx-revealed","true");var e=ae(t);if(e.initHash){ce(t,"revealed")}else{t.addEventListener("htmx:afterProcessNode",function(e){ce(t,"revealed")},{once:true})}}}function mt(e,t,r){var n=D(r);for(var i=0;i<n.length;i++){var a=n[i].split(/:(.+)/);if(a[0]==="connect"){xt(e,a[1],0)}if(a[0]==="send"){bt(e)}}}function xt(s,r,n){if(!se(s)){return}if(r.indexOf("/")==0){var e=location.hostname+(location.port?":"+location.port:"");if(location.protocol=="https:"){r="wss://"+e+r}else if(location.protocol=="http:"){r="ws://"+e+r}}var t=Q.createWebSocket(r);t.onerror=function(e){fe(s,"htmx:wsError",{error:e,socket:t});yt(s)};t.onclose=function(e){if([1006,1012,1013].indexOf(e.code)>=0){var t=wt(n);setTimeout(function(){xt(s,r,n+1)},t)}};t.onopen=function(e){n=0};ae(s).webSocket=t;t.addEventListener("message",function(e){if(yt(s)){return}var t=e.data;R(s,function(e){t=e.transformResponse(t,null,s)});var r=T(s);var n=l(t);var i=M(n.children);for(var a=0;a<i.length;a++){var o=i[a];Ee(te(o,"hx-swap-oob")||"true",o,r)}nr(r.tasks)})}function yt(e){if(!se(e)){ae(e).webSocket.close();return true}}function bt(u){var f=c(u,function(e){return ae(e).webSocket!=null});if(f){u.addEventListener(it(u)[0].trigger,function(e){var t=ae(f).webSocket;var r=xr(u,f);var n=dr(u,"post");var i=n.errors;var a=n.values;var o=Hr(u);var s=le(a,o);var l=yr(s,u);l["HEADERS"]=r;if(i&&i.length>0){ce(u,"htmx:validation:halted",i);return}t.send(JSON.stringify(l));if(ut(e,u)){e.preventDefault()}})}else{fe(u,"htmx:noWebSocketSourceError")}}function wt(e){var t=Q.config.wsReconnectDelay;if(typeof t==="function"){return t(e)}if(t==="full-jitter"){var r=Math.min(e,6);var n=1e3*Math.pow(2,r);return n*Math.random()}b('htmx.config.wsReconnectDelay must either be a function or the string "full-jitter"')}function St(e,t,r){var n=D(r);for(var i=0;i<n.length;i++){var a=n[i].split(/:(.+)/);if(a[0]==="connect"){Et(e,a[1])}if(a[0]==="swap"){Ct(e,a[1])}}}function Et(t,e){var r=Q.createEventSource(e);r.onerror=function(e){fe(t,"htmx:sseError",{error:e,source:r});Tt(t)};ae(t).sseEventSource=r}function Ct(a,o){var s=c(a,Ot);if(s){var l=ae(s).sseEventSource;var u=function(e){if(Tt(s)){return}if(!se(a)){l.removeEventListener(o,u);return}var t=e.data;R(a,function(e){t=e.transformResponse(t,null,a)});var r=wr(a);var n=ye(a);var i=T(a);je(r.swapStyle,n,a,t,i);nr(i.tasks);ce(a,"htmx:sseMessage",e)};ae(a).sseListener=u;l.addEventListener(o,u)}else{fe(a,"htmx:noSSESourceError")}}function Rt(e,t,r){var n=c(e,Ot);if(n){var i=ae(n).sseEventSource;var a=function(){if(!Tt(n)){if(se(e)){t(e)}else{i.removeEventListener(r,a)}}};ae(e).sseListener=a;i.addEventListener(r,a)}else{fe(e,"htmx:noSSESourceError")}}function Tt(e){if(!se(e)){ae(e).sseEventSource.close();return true}}function Ot(e){return ae(e).sseEventSource!=null}function qt(e,t,r,n){var i=function(){if(!r.loaded){r.loaded=true;t(e)}};if(n>0){setTimeout(i,n)}else{i()}}function Ht(t,i,e){var a=false;oe(w,function(r){if(o(t,"hx-"+r)){var n=te(t,"hx-"+r);a=true;i.path=n;i.verb=r;e.forEach(function(e){Lt(t,e,i,function(e,t){if(v(e,Q.config.disableSelector)){m(e);return}he(r,n,e,t)})})}});return a}function Lt(n,e,t,r){if(e.sseEvent){Rt(n,r,e.sseEvent)}else if(e.trigger==="revealed"){gt();ht(n,r,t,e);pt(n)}else if(e.trigger==="intersect"){var i={};if(e.root){i.root=ue(n,e.root)}if(e.threshold){i.threshold=parseFloat(e.threshold)}var a=new IntersectionObserver(function(e){for(var t=0;t<e.length;t++){var r=e[t];if(r.isIntersecting){ce(n,"intersect");break}}},i);a.observe(n);ht(n,r,t,e)}else if(e.trigger==="load"){if(!ct(e,n,Wt("load",{elt:n}))){qt(n,r,t,e.delay)}}else if(e.pollInterval>0){t.polling=true;ot(n,r,e)}else{ht(n,r,t,e)}}function At(e){if(!e.htmxExecuted&&Q.config.allowScriptTags&&(e.type==="text/javascript"||e.type==="module"||e.type==="")){var t=re().createElement("script");oe(e.attributes,function(e){t.setAttribute(e.name,e.value)});t.textContent=e.textContent;t.async=false;if(Q.config.inlineScriptNonce){t.nonce=Q.config.inlineScriptNonce}var r=e.parentElement;try{r.insertBefore(t,e)}catch(e){b(e)}finally{if(e.parentElement){e.parentElement.removeChild(e)}}}}function Nt(e){if(h(e,"script")){At(e)}oe(f(e,"script"),function(e){At(e)})}function It(e){var t=e.attributes;if(!t){return false}for(var r=0;r<t.length;r++){var n=t[r].name;if(g(n,"hx-on:")||g(n,"data-hx-on:")||g(n,"hx-on-")||g(n,"data-hx-on-")){return true}}return false}function kt(e){var t=null;var r=[];if(It(e)){r.push(e)}if(document.evaluate){var n=document.evaluate('.//*[@*[ starts-with(name(), "hx-on:") or starts-with(name(), "data-hx-on:") or'+' starts-with(name(), "hx-on-") or starts-with(name(), "data-hx-on-") ]]',e);while(t=n.iterateNext())r.push(t)}else if(typeof e.getElementsByTagName==="function"){var i=e.getElementsByTagName("*");for(var a=0;a<i.length;a++){if(It(i[a])){r.push(i[a])}}}return r}function Pt(e){if(e.querySelectorAll){var t=", [hx-boost] a, [data-hx-boost] a, a[hx-boost], a[data-hx-boost]";var r=e.querySelectorAll(i+t+", form, [type='submit'], [hx-sse], [data-hx-sse], [hx-ws],"+" [data-hx-ws], [hx-ext], [data-hx-ext], [hx-trigger], [data-hx-trigger], [hx-on], [data-hx-on]");return r}else{return[]}}function Mt(e){var t=v(e.target,"button, input[type='submit']");var r=Dt(e);if(r){r.lastButtonClicked=t}}function Xt(e){var t=Dt(e);if(t){t.lastButtonClicked=null}}function Dt(e){var t=v(e.target,"button, input[type='submit']");if(!t){return}var r=p("#"+ee(t,"form"))||v(t,"form");if(!r){return}return ae(r)}function Ut(e){e.addEventListener("click",Mt);e.addEventListener("focusin",Mt);e.addEventListener("focusout",Xt)}function Bt(e){var t=Ye(e);var r=0;for(var n=0;n<t.length;n++){const i=t[n];if(i==="{"){r++}else if(i==="}"){r--}}return r}function Ft(t,e,r){var n=ae(t);if(!Array.isArray(n.onHandlers)){n.onHandlers=[]}var i;var a=function(e){return Tr(t,function(){if(!i){i=new Function("event",r)}i.call(t,e)})};t.addEventListener(e,a);n.onHandlers.push({event:e,listener:a})}function Vt(e){var t=te(e,"hx-on");if(t){var r={};var n=t.split("\n");var i=null;var a=0;while(n.length>0){var o=n.shift();var s=o.match(/^\s*([a-zA-Z:\-\.]+:)(.*)/);if(a===0&&s){o.split(":");i=s[1].slice(0,-1);r[i]=s[2]}else{r[i]+=o}a+=Bt(o)}for(var l in r){Ft(e,l,r[l])}}}function jt(e){Ae(e);for(var t=0;t<e.attributes.length;t++){var r=e.attributes[t].name;var n=e.attributes[t].value;if(g(r,"hx-on")||g(r,"data-hx-on")){var i=r.indexOf("-on")+3;var a=r.slice(i,i+1);if(a==="-"||a===":"){var o=r.slice(i+1);if(g(o,":")){o="htmx"+o}else if(g(o,"-")){o="htmx:"+o.slice(1)}else if(g(o,"htmx-")){o="htmx:"+o.slice(5)}Ft(e,o,n)}}}}function _t(t){if(v(t,Q.config.disableSelector)){m(t);return}var r=ae(t);if(r.initHash!==Le(t)){Ne(t);r.initHash=Le(t);Vt(t);ce(t,"htmx:beforeProcessNode");if(t.value){r.lastValue=t.value}var e=it(t);var n=Ht(t,r,e);if(!n){if(ne(t,"hx-boost")==="true"){lt(t,r,e)}else if(o(t,"hx-trigger")){e.forEach(function(e){Lt(t,e,r,function(){})})}}if(t.tagName==="FORM"||ee(t,"type")==="submit"&&o(t,"form")){Ut(t)}var i=te(t,"hx-sse");if(i){St(t,r,i)}var a=te(t,"hx-ws");if(a){mt(t,r,a)}ce(t,"htmx:afterProcessNode")}}function zt(e){e=p(e);if(v(e,Q.config.disableSelector)){m(e);return}_t(e);oe(Pt(e),function(e){_t(e)});oe(kt(e),jt)}function $t(e){return e.replace(/([a-z0-9])([A-Z])/g,"$1-$2").toLowerCase()}function Wt(e,t){var r;if(window.CustomEvent&&typeof window.CustomEvent==="function"){r=new CustomEvent(e,{bubbles:true,cancelable:true,detail:t})}else{r=re().createEvent("CustomEvent");r.initCustomEvent(e,true,true,t)}return r}function fe(e,t,r){ce(e,t,le({error:t},r))}function Gt(e){return e==="htmx:afterProcessNode"}function R(e,t){oe(Fr(e),function(e){try{t(e)}catch(e){b(e)}})}function b(e){if(console.error){console.error(e)}else if(console.log){console.log("ERROR: ",e)}}function ce(e,t,r){e=p(e);if(r==null){r={}}r["elt"]=e;var n=Wt(t,r);if(Q.logger&&!Gt(t)){Q.logger(e,t,r)}if(r.error){b(r.error);ce(e,"htmx:error",{errorInfo:r})}var i=e.dispatchEvent(n);var a=$t(t);if(i&&a!==t){var o=Wt(a,n.detail);i=i&&e.dispatchEvent(o)}R(e,function(e){i=i&&(e.onEvent(t,n)!==false&&!n.defaultPrevented)});return i}var Jt=location.pathname+location.search;function Zt(){var e=re().querySelector("[hx-history-elt],[data-hx-history-elt]");return e||re().body}function Kt(e,t,r,n){if(!U()){return}if(Q.config.historyCacheSize<=0){localStorage.removeItem("htmx-history-cache");return}e=B(e);var i=E(localStorage.getItem("htmx-history-cache"))||[];for(var a=0;a<i.length;a++){if(i[a].url===e){i.splice(a,1);break}}var o={url:e,content:t,title:r,scroll:n};ce(re().body,"htmx:historyItemCreated",{item:o,cache:i});i.push(o);while(i.length>Q.config.historyCacheSize){i.shift()}while(i.length>0){try{localStorage.setItem("htmx-history-cache",JSON.stringify(i));break}catch(e){fe(re().body,"htmx:historyCacheError",{cause:e,cache:i});i.shift()}}}function Yt(e){if(!U()){return null}e=B(e);var t=E(localStorage.getItem("htmx-history-cache"))||[];for(var r=0;r<t.length;r++){if(t[r].url===e){return t[r]}}return null}function Qt(e){var t=Q.config.requestClass;var r=e.cloneNode(true);oe(f(r,"."+t),function(e){n(e,t)});return r.innerHTML}function er(){var e=Zt();var t=Jt||location.pathname+location.search;var r;try{r=re().querySelector('[hx-history="false" i],[data-hx-history="false" i]')}catch(e){r=re().querySelector('[hx-history="false"],[data-hx-history="false"]')}if(!r){ce(re().body,"htmx:beforeHistorySave",{path:t,historyElt:e});Kt(t,Qt(e),re().title,window.scrollY)}if(Q.config.historyEnabled)history.replaceState({htmx:true},re().title,window.location.href)}function tr(e){if(Q.config.getCacheBusterParam){e=e.replace(/org\.htmx\.cache-buster=[^&]*&?/,"");if(G(e,"&")||G(e,"?")){e=e.slice(0,-1)}}if(Q.config.historyEnabled){history.pushState({htmx:true},"",e)}Jt=e}function rr(e){if(Q.config.historyEnabled)history.replaceState({htmx:true},"",e);Jt=e}function nr(e){oe(e,function(e){e.call()})}function ir(a){var e=new XMLHttpRequest;var o={path:a,xhr:e};ce(re().body,"htmx:historyCacheMiss",o);e.open("GET",a,true);e.setRequestHeader("HX-Request","true");e.setRequestHeader("HX-History-Restore-Request","true");e.setRequestHeader("HX-Current-URL",re().location.href);e.onload=function(){if(this.status>=200&&this.status<400){ce(re().body,"htmx:historyCacheMissLoad",o);var e=l(this.response);e=e.querySelector("[hx-history-elt],[data-hx-history-elt]")||e;var t=Zt();var r=T(t);var n=Ve(this.response);if(n){var i=C("title");if(i){i.innerHTML=n}else{window.document.title=n}}Ue(t,e,r);nr(r.tasks);Jt=a;ce(re().body,"htmx:historyRestore",{path:a,cacheMiss:true,serverResponse:this.response})}else{fe(re().body,"htmx:historyCacheMissLoadError",o)}};e.send()}function ar(e){er();e=e||location.pathname+location.search;var t=Yt(e);if(t){var r=l(t.content);var n=Zt();var i=T(n);Ue(n,r,i);nr(i.tasks);document.title=t.title;setTimeout(function(){window.scrollTo(0,t.scroll)},0);Jt=e;ce(re().body,"htmx:historyRestore",{path:e,item:t})}else{if(Q.config.refreshOnHistoryMiss){window.location.reload(true)}else{ir(e)}}}function or(e){var t=me(e,"hx-indicator");if(t==null){t=[e]}oe(t,function(e){var t=ae(e);t.requestCount=(t.requestCount||0)+1;e.classList["add"].call(e.classList,Q.config.requestClass)});return t}function sr(e){var t=me(e,"hx-disabled-elt");if(t==null){t=[]}oe(t,function(e){var t=ae(e);t.requestCount=(t.requestCount||0)+1;e.setAttribute("disabled","")});return t}function lr(e,t){oe(e,function(e){var t=ae(e);t.requestCount=(t.requestCount||0)-1;if(t.requestCount===0){e.classList["remove"].call(e.classList,Q.config.requestClass)}});oe(t,function(e){var t=ae(e);t.requestCount=(t.requestCount||0)-1;if(t.requestCount===0){e.removeAttribute("disabled")}})}function ur(e,t){for(var r=0;r<e.length;r++){var n=e[r];if(n.isSameNode(t)){return true}}return false}function fr(e){if(e.name===""||e.name==null||e.disabled||v(e,"fieldset[disabled]")){return false}if(e.type==="button"||e.type==="submit"||e.tagName==="image"||e.tagName==="reset"||e.tagName==="file"){return false}if(e.type==="checkbox"||e.type==="radio"){return e.checked}return true}function cr(e,t,r){if(e!=null&&t!=null){var n=r[e];if(n===undefined){r[e]=t}else if(Array.isArray(n)){if(Array.isArray(t)){r[e]=n.concat(t)}else{n.push(t)}}else{if(Array.isArray(t)){r[e]=[n].concat(t)}else{r[e]=[n,t]}}}}function hr(t,r,n,e,i){if(e==null||ur(t,e)){return}else{t.push(e)}if(fr(e)){var a=ee(e,"name");var o=e.value;if(e.multiple&&e.tagName==="SELECT"){o=M(e.querySelectorAll("option:checked")).map(function(e){return e.value})}if(e.files){o=M(e.files)}cr(a,o,r);if(i){vr(e,n)}}if(h(e,"form")){var s=e.elements;oe(s,function(e){hr(t,r,n,e,i)})}}function vr(e,t){if(e.willValidate){ce(e,"htmx:validation:validate");if(!e.checkValidity()){t.push({elt:e,message:e.validationMessage,validity:e.validity});ce(e,"htmx:validation:failed",{message:e.validationMessage,validity:e.validity})}}}function dr(e,t){var r=[];var n={};var i={};var a=[];var o=ae(e);if(o.lastButtonClicked&&!se(o.lastButtonClicked)){o.lastButtonClicked=null}var s=h(e,"form")&&e.noValidate!==true||te(e,"hx-validate")==="true";if(o.lastButtonClicked){s=s&&o.lastButtonClicked.formNoValidate!==true}if(t!=="get"){hr(r,i,a,v(e,"form"),s)}hr(r,n,a,e,s);if(o.lastButtonClicked||e.tagName==="BUTTON"||e.tagName==="INPUT"&&ee(e,"type")==="submit"){var l=o.lastButtonClicked||e;var u=ee(l,"name");cr(u,l.value,i)}var f=me(e,"hx-include");oe(f,function(e){hr(r,n,a,e,s);if(!h(e,"form")){oe(e.querySelectorAll(rt),function(e){hr(r,n,a,e,s)})}});n=le(n,i);return{errors:a,values:n}}function gr(e,t,r){if(e!==""){e+="&"}if(String(r)==="[object Object]"){r=JSON.stringify(r)}var n=encodeURIComponent(r);e+=encodeURIComponent(t)+"="+n;return e}function pr(e){var t="";for(var r in e){if(e.hasOwnProperty(r)){var n=e[r];if(Array.isArray(n)){oe(n,function(e){t=gr(t,r,e)})}else{t=gr(t,r,n)}}}return t}function mr(e){var t=new FormData;for(var r in e){if(e.hasOwnProperty(r)){var n=e[r];if(Array.isArray(n)){oe(n,function(e){t.append(r,e)})}else{t.append(r,n)}}}return t}function xr(e,t,r){var n={"HX-Request":"true","HX-Trigger":ee(e,"id"),"HX-Trigger-Name":ee(e,"name"),"HX-Target":te(t,"id"),"HX-Current-URL":re().location.href};Rr(e,"hx-headers",false,n);if(r!==undefined){n["HX-Prompt"]=r}if(ae(e).boosted){n["HX-Boosted"]="true"}return n}function yr(t,e){var r=ne(e,"hx-params");if(r){if(r==="none"){return{}}else if(r==="*"){return t}else if(r.indexOf("not ")===0){oe(r.substr(4).split(","),function(e){e=e.trim();delete t[e]});return t}else{var n={};oe(r.split(","),function(e){e=e.trim();n[e]=t[e]});return n}}else{return t}}function br(e){return ee(e,"href")&&ee(e,"href").indexOf("#")>=0}function wr(e,t){var r=t?t:ne(e,"hx-swap");var n={swapStyle:ae(e).boosted?"innerHTML":Q.config.defaultSwapStyle,swapDelay:Q.config.defaultSwapDelay,settleDelay:Q.config.defaultSettleDelay};if(Q.config.scrollIntoViewOnBoost&&ae(e).boosted&&!br(e)){n["show"]="top"}if(r){var i=D(r);if(i.length>0){for(var a=0;a<i.length;a++){var o=i[a];if(o.indexOf("swap:")===0){n["swapDelay"]=d(o.substr(5))}else if(o.indexOf("settle:")===0){n["settleDelay"]=d(o.substr(7))}else if(o.indexOf("transition:")===0){n["transition"]=o.substr(11)==="true"}else if(o.indexOf("ignoreTitle:")===0){n["ignoreTitle"]=o.substr(12)==="true"}else if(o.indexOf("scroll:")===0){var s=o.substr(7);var l=s.split(":");var u=l.pop();var f=l.length>0?l.join(":"):null;n["scroll"]=u;n["scrollTarget"]=f}else if(o.indexOf("show:")===0){var c=o.substr(5);var l=c.split(":");var h=l.pop();var f=l.length>0?l.join(":"):null;n["show"]=h;n["showTarget"]=f}else if(o.indexOf("focus-scroll:")===0){var v=o.substr("focus-scroll:".length);n["focusScroll"]=v=="true"}else if(a==0){n["swapStyle"]=o}else{b("Unknown modifier in hx-swap: "+o)}}}}return n}function Sr(e){return ne(e,"hx-encoding")==="multipart/form-data"||h(e,"form")&&ee(e,"enctype")==="multipart/form-data"}function Er(t,r,n){var i=null;R(r,function(e){if(i==null){i=e.encodeParameters(t,n,r)}});if(i!=null){return i}else{if(Sr(r)){return mr(n)}else{return pr(n)}}}function T(e){return{tasks:[],elts:[e]}}function Cr(e,t){var r=e[0];var n=e[e.length-1];if(t.scroll){var i=null;if(t.scrollTarget){i=ue(r,t.scrollTarget)}if(t.scroll==="top"&&(r||i)){i=i||r;i.scrollTop=0}if(t.scroll==="bottom"&&(n||i)){i=i||n;i.scrollTop=i.scrollHeight}}if(t.show){var i=null;if(t.showTarget){var a=t.showTarget;if(t.showTarget==="window"){a="body"}i=ue(r,a)}if(t.show==="top"&&(r||i)){i=i||r;i.scrollIntoView({block:"start",behavior:Q.config.scrollBehavior})}if(t.show==="bottom"&&(n||i)){i=i||n;i.scrollIntoView({block:"end",behavior:Q.config.scrollBehavior})}}}function Rr(e,t,r,n){if(n==null){n={}}if(e==null){return n}var i=te(e,t);if(i){var a=i.trim();var o=r;if(a==="unset"){return null}if(a.indexOf("javascript:")===0){a=a.substr(11);o=true}else if(a.indexOf("js:")===0){a=a.substr(3);o=true}if(a.indexOf("{")!==0){a="{"+a+"}"}var s;if(o){s=Tr(e,function(){return Function("return ("+a+")")()},{})}else{s=E(a)}for(var l in s){if(s.hasOwnProperty(l)){if(n[l]==null){n[l]=s[l]}}}}return Rr(u(e),t,r,n)}function Tr(e,t,r){if(Q.config.allowEval){return t()}else{fe(e,"htmx:evalDisallowedError");return r}}function Or(e,t){return Rr(e,"hx-vars",true,t)}function qr(e,t){return Rr(e,"hx-vals",false,t)}function Hr(e){return le(Or(e),qr(e))}function Lr(t,r,n){if(n!==null){try{t.setRequestHeader(r,n)}catch(e){t.setRequestHeader(r,encodeURIComponent(n));t.setRequestHeader(r+"-URI-AutoEncoded","true")}}}function Ar(t){if(t.responseURL&&typeof URL!=="undefined"){try{var e=new URL(t.responseURL);return e.pathname+e.search}catch(e){fe(re().body,"htmx:badResponseUrl",{url:t.responseURL})}}}function O(e,t){return t.test(e.getAllResponseHeaders())}function Nr(e,t,r){e=e.toLowerCase();if(r){if(r instanceof Element||I(r,"String")){return he(e,t,null,null,{targetOverride:p(r),returnPromise:true})}else{return he(e,t,p(r.source),r.event,{handler:r.handler,headers:r.headers,values:r.values,targetOverride:p(r.target),swapOverride:r.swap,select:r.select,returnPromise:true})}}else{return he(e,t,null,null,{returnPromise:true})}}function Ir(e){var t=[];while(e){t.push(e);e=e.parentElement}return t}function kr(e,t,r){var n;var i;if(typeof URL==="function"){i=new URL(t,document.location.href);var a=document.location.origin;n=a===i.origin}else{i=t;n=g(t,document.location.origin)}if(Q.config.selfRequestsOnly){if(!n){return false}}return ce(e,"htmx:validateUrl",le({url:i,sameHost:n},r))}function he(t,r,n,i,a,e){var o=null;var s=null;a=a!=null?a:{};if(a.returnPromise&&typeof Promise!=="undefined"){var l=new Promise(function(e,t){o=e;s=t})}if(n==null){n=re().body}var M=a.handler||Mr;var X=a.select||null;if(!se(n)){ie(o);return l}var u=a.targetOverride||ye(n);if(u==null||u==pe){fe(n,"htmx:targetError",{target:te(n,"hx-target")});ie(s);return l}var f=ae(n);var c=f.lastButtonClicked;if(c){var h=ee(c,"formaction");if(h!=null){r=h}var v=ee(c,"formmethod");if(v!=null){if(v.toLowerCase()!=="dialog"){t=v}}}var d=ne(n,"hx-confirm");if(e===undefined){var D=function(e){return he(t,r,n,i,a,!!e)};var U={target:u,elt:n,path:r,verb:t,triggeringEvent:i,etc:a,issueRequest:D,question:d};if(ce(n,"htmx:confirm",U)===false){ie(o);return l}}var g=n;var p=ne(n,"hx-sync");var m=null;var x=false;if(p){var B=p.split(":");var F=B[0].trim();if(F==="this"){g=xe(n,"hx-sync")}else{g=ue(n,F)}p=(B[1]||"drop").trim();f=ae(g);if(p==="drop"&&f.xhr&&f.abortable!==true){ie(o);return l}else if(p==="abort"){if(f.xhr){ie(o);return l}else{x=true}}else if(p==="replace"){ce(g,"htmx:abort")}else if(p.indexOf("queue")===0){var V=p.split(" ");m=(V[1]||"last").trim()}}if(f.xhr){if(f.abortable){ce(g,"htmx:abort")}else{if(m==null){if(i){var y=ae(i);if(y&&y.triggerSpec&&y.triggerSpec.queue){m=y.triggerSpec.queue}}if(m==null){m="last"}}if(f.queuedRequests==null){f.queuedRequests=[]}if(m==="first"&&f.queuedRequests.length===0){f.queuedRequests.push(function(){he(t,r,n,i,a)})}else if(m==="all"){f.queuedRequests.push(function(){he(t,r,n,i,a)})}else if(m==="last"){f.queuedRequests=[];f.queuedRequests.push(function(){he(t,r,n,i,a)})}ie(o);return l}}var b=new XMLHttpRequest;f.xhr=b;f.abortable=x;var w=function(){f.xhr=null;f.abortable=false;if(f.queuedRequests!=null&&f.queuedRequests.length>0){var e=f.queuedRequests.shift();e()}};var j=ne(n,"hx-prompt");if(j){var S=prompt(j);if(S===null||!ce(n,"htmx:prompt",{prompt:S,target:u})){ie(o);w();return l}}if(d&&!e){if(!confirm(d)){ie(o);w();return l}}var E=xr(n,u,S);if(t!=="get"&&!Sr(n)){E["Content-Type"]="application/x-www-form-urlencoded"}if(a.headers){E=le(E,a.headers)}var _=dr(n,t);var C=_.errors;var R=_.values;if(a.values){R=le(R,a.values)}var z=Hr(n);var $=le(R,z);var T=yr($,n);if(Q.config.getCacheBusterParam&&t==="get"){T["org.htmx.cache-buster"]=ee(u,"id")||"true"}if(r==null||r===""){r=re().location.href}var O=Rr(n,"hx-request");var W=ae(n).boosted;var q=Q.config.methodsThatUseUrlParams.indexOf(t)>=0;var H={boosted:W,useUrlParams:q,parameters:T,unfilteredParameters:$,headers:E,target:u,verb:t,errors:C,withCredentials:a.credentials||O.credentials||Q.config.withCredentials,timeout:a.timeout||O.timeout||Q.config.timeout,path:r,triggeringEvent:i};if(!ce(n,"htmx:configRequest",H)){ie(o);w();return l}r=H.path;t=H.verb;E=H.headers;T=H.parameters;C=H.errors;q=H.useUrlParams;if(C&&C.length>0){ce(n,"htmx:validation:halted",H);ie(o);w();return l}var G=r.split("#");var J=G[0];var L=G[1];var A=r;if(q){A=J;var Z=Object.keys(T).length!==0;if(Z){if(A.indexOf("?")<0){A+="?"}else{A+="&"}A+=pr(T);if(L){A+="#"+L}}}if(!kr(n,A,H)){fe(n,"htmx:invalidPath",H);ie(s);return l}b.open(t.toUpperCase(),A,true);b.overrideMimeType("text/html");b.withCredentials=H.withCredentials;b.timeout=H.timeout;if(O.noHeaders){}else{for(var N in E){if(E.hasOwnProperty(N)){var K=E[N];Lr(b,N,K)}}}var I={xhr:b,target:u,requestConfig:H,etc:a,boosted:W,select:X,pathInfo:{requestPath:r,finalRequestPath:A,anchor:L}};b.onload=function(){try{var e=Ir(n);I.pathInfo.responsePath=Ar(b);M(n,I);lr(k,P);ce(n,"htmx:afterRequest",I);ce(n,"htmx:afterOnLoad",I);if(!se(n)){var t=null;while(e.length>0&&t==null){var r=e.shift();if(se(r)){t=r}}if(t){ce(t,"htmx:afterRequest",I);ce(t,"htmx:afterOnLoad",I)}}ie(o);w()}catch(e){fe(n,"htmx:onLoadError",le({error:e},I));throw e}};b.onerror=function(){lr(k,P);fe(n,"htmx:afterRequest",I);fe(n,"htmx:sendError",I);ie(s);w()};b.onabort=function(){lr(k,P);fe(n,"htmx:afterRequest",I);fe(n,"htmx:sendAbort",I);ie(s);w()};b.ontimeout=function(){lr(k,P);fe(n,"htmx:afterRequest",I);fe(n,"htmx:timeout",I);ie(s);w()};if(!ce(n,"htmx:beforeRequest",I)){ie(o);w();return l}var k=or(n);var P=sr(n);oe(["loadstart","loadend","progress","abort"],function(t){oe([b,b.upload],function(e){e.addEventListener(t,function(e){ce(n,"htmx:xhr:"+t,{lengthComputable:e.lengthComputable,loaded:e.loaded,total:e.total})})})});ce(n,"htmx:beforeSend",I);var Y=q?null:Er(b,n,T);b.send(Y);return l}function Pr(e,t){var r=t.xhr;var n=null;var i=null;if(O(r,/HX-Push:/i)){n=r.getResponseHeader("HX-Push");i="push"}else if(O(r,/HX-Push-Url:/i)){n=r.getResponseHeader("HX-Push-Url");i="push"}else if(O(r,/HX-Replace-Url:/i)){n=r.getResponseHeader("HX-Replace-Url");i="replace"}if(n){if(n==="false"){return{}}else{return{type:i,path:n}}}var a=t.pathInfo.finalRequestPath;var o=t.pathInfo.responsePath;var s=ne(e,"hx-push-url");var l=ne(e,"hx-replace-url");var u=ae(e).boosted;var f=null;var c=null;if(s){f="push";c=s}else if(l){f="replace";c=l}else if(u){f="push";c=o||a}if(c){if(c==="false"){return{}}if(c==="true"){c=o||a}if(t.pathInfo.anchor&&c.indexOf("#")===-1){c=c+"#"+t.pathInfo.anchor}return{type:f,path:c}}else{return{}}}function Mr(l,u){var f=u.xhr;var c=u.target;var e=u.etc;var t=u.requestConfig;var h=u.select;if(!ce(l,"htmx:beforeOnLoad",u))return;if(O(f,/HX-Trigger:/i)){_e(f,"HX-Trigger",l)}if(O(f,/HX-Location:/i)){er();var r=f.getResponseHeader("HX-Location");var v;if(r.indexOf("{")===0){v=E(r);r=v["path"];delete v["path"]}Nr("GET",r,v).then(function(){tr(r)});return}var n=O(f,/HX-Refresh:/i)&&"true"===f.getResponseHeader("HX-Refresh");if(O(f,/HX-Redirect:/i)){location.href=f.getResponseHeader("HX-Redirect");n&&location.reload();return}if(n){location.reload();return}if(O(f,/HX-Retarget:/i)){if(f.getResponseHeader("HX-Retarget")==="this"){u.target=l}else{u.target=ue(l,f.getResponseHeader("HX-Retarget"))}}var d=Pr(l,u);var i=f.status>=200&&f.status<400&&f.status!==204;var g=f.response;var a=f.status>=400;var p=Q.config.ignoreTitle;var o=le({shouldSwap:i,serverResponse:g,isError:a,ignoreTitle:p},u);if(!ce(c,"htmx:beforeSwap",o))return;c=o.target;g=o.serverResponse;a=o.isError;p=o.ignoreTitle;u.target=c;u.failed=a;u.successful=!a;if(o.shouldSwap){if(f.status===286){at(l)}R(l,function(e){g=e.transformResponse(g,f,l)});if(d.type){er()}var s=e.swapOverride;if(O(f,/HX-Reswap:/i)){s=f.getResponseHeader("HX-Reswap")}var v=wr(l,s);if(v.hasOwnProperty("ignoreTitle")){p=v.ignoreTitle}c.classList.add(Q.config.swappingClass);var m=null;var x=null;var y=function(){try{var e=document.activeElement;var t={};try{t={elt:e,start:e?e.selectionStart:null,end:e?e.selectionEnd:null}}catch(e){}var r;if(h){r=h}if(O(f,/HX-Reselect:/i)){r=f.getResponseHeader("HX-Reselect")}if(d.type){ce(re().body,"htmx:beforeHistoryUpdate",le({history:d},u));if(d.type==="push"){tr(d.path);ce(re().body,"htmx:pushedIntoHistory",{path:d.path})}else{rr(d.path);ce(re().body,"htmx:replacedInHistory",{path:d.path})}}var n=T(c);je(v.swapStyle,c,l,g,n,r);if(t.elt&&!se(t.elt)&&ee(t.elt,"id")){var i=document.getElementById(ee(t.elt,"id"));var a={preventScroll:v.focusScroll!==undefined?!v.focusScroll:!Q.config.defaultFocusScroll};if(i){if(t.start&&i.setSelectionRange){try{i.setSelectionRange(t.start,t.end)}catch(e){}}i.focus(a)}}c.classList.remove(Q.config.swappingClass);oe(n.elts,function(e){if(e.classList){e.classList.add(Q.config.settlingClass)}ce(e,"htmx:afterSwap",u)});if(O(f,/HX-Trigger-After-Swap:/i)){var o=l;if(!se(l)){o=re().body}_e(f,"HX-Trigger-After-Swap",o)}var s=function(){oe(n.tasks,function(e){e.call()});oe(n.elts,function(e){if(e.classList){e.classList.remove(Q.config.settlingClass)}ce(e,"htmx:afterSettle",u)});if(u.pathInfo.anchor){var e=re().getElementById(u.pathInfo.anchor);if(e){e.scrollIntoView({block:"start",behavior:"auto"})}}if(n.title&&!p){var t=C("title");if(t){t.innerHTML=n.title}else{window.document.title=n.title}}Cr(n.elts,v);if(O(f,/HX-Trigger-After-Settle:/i)){var r=l;if(!se(l)){r=re().body}_e(f,"HX-Trigger-After-Settle",r)}ie(m)};if(v.settleDelay>0){setTimeout(s,v.settleDelay)}else{s()}}catch(e){fe(l,"htmx:swapError",u);ie(x);throw e}};var b=Q.config.globalViewTransitions;if(v.hasOwnProperty("transition")){b=v.transition}if(b&&ce(l,"htmx:beforeTransition",u)&&typeof Promise!=="undefined"&&document.startViewTransition){var w=new Promise(function(e,t){m=e;x=t});var S=y;y=function(){document.startViewTransition(function(){S();return w})}}if(v.swapDelay>0){setTimeout(y,v.swapDelay)}else{y()}}if(a){fe(l,"htmx:responseError",le({error:"Response Status Error Code "+f.status+" from "+u.pathInfo.requestPath},u))}}var Xr={};function Dr(){return{init:function(e){return null},onEvent:function(e,t){return true},transformResponse:function(e,t,r){return e},isInlineSwap:function(e){return false},handleSwap:function(e,t,r,n){return false},encodeParameters:function(e,t,r){return null}}}function Ur(e,t){if(t.init){t.init(r)}Xr[e]=le(Dr(),t)}function Br(e){delete Xr[e]}function Fr(e,r,n){if(e==undefined){return r}if(r==undefined){r=[]}if(n==undefined){n=[]}var t=te(e,"hx-ext");if(t){oe(t.split(","),function(e){e=e.replace(/ /g,"");if(e.slice(0,7)=="ignore:"){n.push(e.slice(7));return}if(n.indexOf(e)<0){var t=Xr[e];if(t&&r.indexOf(t)<0){r.push(t)}}})}return Fr(u(e),r,n)}var Vr=false;re().addEventListener("DOMContentLoaded",function(){Vr=true});function jr(e){if(Vr||re().readyState==="complete"){e()}else{re().addEventListener("DOMContentLoaded",e)}}function _r(){if(Q.config.includeIndicatorStyles!==false){re().head.insertAdjacentHTML("beforeend","<style>                      ."+Q.config.indicatorClass+"{opacity:0}                      ."+Q.config.requestClass+" ."+Q.config.indicatorClass+"{opacity:1; transition: opacity 200ms ease-in;}                      ."+Q.config.requestClass+"."+Q.config.indicatorClass+"{opacity:1; transition: opacity 200ms ease-in;}                    </style>")}}function zr(){var e=re().querySelector('meta[name="htmx-config"]');if(e){return E(e.content)}else{return null}}function $r(){var e=zr();if(e){Q.config=le(Q.config,e)}}jr(function(){$r();_r();var e=re().body;zt(e);var t=re().querySelectorAll("[hx-trigger='restored'],[data-hx-trigger='restored']");e.addEventListener("htmx:abort",function(e){var t=e.target;var r=ae(t);if(r&&r.xhr){r.xhr.abort()}});const r=window.onpopstate?window.onpopstate.bind(window):null;window.onpopstate=function(e){if(e.state&&e.state.htmx){ar();oe(t,function(e){ce(e,"htmx:restored",{document:re(),triggerEvent:ce})})}else{if(r){r(e)}}};setTimeout(function(){ce(e,"htmx:load",{});e=null},0)});return Q}()});

app/static/styles.css

@@ -1,983 +1,737 @@
 /* ═══════════════════════════════════════════════════════════════════════════
-   ResearchIT — Master Stylesheet
-   Premium dark-first design system for a personalized research feed.
+   ResearchIT — design system
+   ---------------------------------------------------------------------------
+   Single hand-written stylesheet. Replaces Tailwind Play CDN + DaisyUI +
+   animations.css + the Google Fonts @import.
+
+   Why no Tailwind CDN: tailwindcss.com/docs/installation/play-cdn states the
+   Play CDN is a development tool, not for production. The maintainer's reason
+   (tailwindlabs/tailwindcss#7637) is that it applies styles at RUNTIME, with
+   the worst case being elements added to the page after first load — which is
+   exactly every htmx-swapped paper card. On an infinite feed that means a
+   flash of unstyled content on every appended page.
+
+   Why no webfont: a @font-face CDN link is a render-blocking cross-origin
+   round trip, and the previous @import sat INSIDE this stylesheet, so fonts
+   could not even begin loading until this file was fetched and parsed. System
+   stacks render instantly with zero network. If a brand face is wanted later,
+   self-host it (woff2, subset, font-display: swap, preload) rather than
+   reintroducing a CDN.
+
+   Identity — "reading room": warm near-black rather than the blue-black every
+   research tool uses (warm dark also reduces halation around light text), one
+   restrained green accent reserved for Save, content set in a serif and
+   interface chrome in sans/mono so the two never compete.
    ═══════════════════════════════════════════════════════════════════════════ */
 
-/* ── 1. Typography ────────────────────────────────────────────────────────── */
-@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&family=Outfit:wght@400;500;600;700;800&family=JetBrains+Mono:wght@400;500&display=swap');
+/* ── 1. Tokens ─────────────────────────────────────────────────────────────
+   Three theme states, per the artifact spec:
+     :root                                  complete LIGHT palette (base)
+     @media dark + :not([data-theme=light]) dark for "system" users
+     :root[data-theme="dark"]               dark when explicitly toggled
+   Every colour is defined in the bare :root first, so nothing depends on a
+   media query or attribute being present.                                   */
 
 :root {
-  --rit-accent: #0EA5E9;
-  --rit-accent-light: #38BDF8;
-  --rit-accent-dim: #0284C7;
-  --rit-accent-glow: rgba(14, 165, 233, 0.12);
-  --rit-accent-glow-strong: rgba(14, 165, 233, 0.25);
-  --rit-brand-from: #0EA5E9;
-  --rit-brand-via: #06B6D4;
-  --rit-brand-to: #22D3EE;
-  --rit-radius: 14px;
-  --rit-radius-sm: 10px;
-  --rit-transition: 0.2s cubic-bezier(0.4, 0, 0.2, 1);
-}
-
-body {
-  font-family: 'Inter', system-ui, -apple-system, sans-serif;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-  letter-spacing: -0.01em;
-}
-
-h1, h2, h3, .font-display {
-  font-family: 'Outfit', 'Inter', system-ui, sans-serif;
-}
-
-code, .mono, .font-mono {
-  font-family: 'JetBrains Mono', 'Fira Code', monospace;
-}
-
-/* ── 2. DaisyUI Theme Overrides ───────────────────────────────────────────── */
-/* Override DaisyUI primary color to teal/sky for dark and light themes */
-[data-theme="dark"] {
-  --p: 68.5% 0.163 221.4;    /* oklch: sky-500 */
-  --pf: 60% 0.163 221.4;     /* primary-focus: darker */
-  --pc: 98% 0.01 221.4;      /* primary-content: near white */
-  --b1: 15.7% 0.02 262;      /* base-100: deep navy-black */
-  --b2: 12.5% 0.02 262;      /* base-200: darker */
-  --b3: 10% 0.02 262;        /* base-300: darkest */
-  --bc: 91% 0.01 260;        /* base-content */
-  --rounded-btn: 10px;
-}
-
-[data-theme="light"] {
-  --p: 59% 0.18 221.4;
-  --pf: 52% 0.18 221.4;
-  --pc: 98% 0.005 0;
-  --b1: 98% 0.003 260;
-  --b2: 96% 0.005 260;
-  --b3: 93% 0.008 260;
-  --bc: 22% 0.02 260;
-  --rounded-btn: 10px;
-}
-
-/* ── 3. Base & Resets ─────────────────────────────────────────────────────── */
-html {
-  scroll-behavior: smooth;
-}
-
-html, body {
-  transition: background-color 0.3s ease, color 0.3s ease;
-}
-
-::selection {
-  background: var(--rit-accent);
-  color: white;
-}
-
-/* ── 4. Navbar ─────────���──────────────────────────────────────────────────── */
-.rit-navbar {
-  background: rgba(11, 13, 20, 0.8);
-  backdrop-filter: blur(20px) saturate(180%);
-  -webkit-backdrop-filter: blur(20px) saturate(180%);
-  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
-  transition: background var(--rit-transition);
-}
-
-[data-theme="light"] .rit-navbar {
-  background: rgba(255, 255, 255, 0.82);
-  border-bottom: 1px solid rgba(0, 0, 0, 0.06);
-  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
-}
-
-.rit-nav-link {
-  position: relative;
-  color: rgba(255, 255, 255, 0.6);
-  font-size: 0.875rem;
-  font-weight: 500;
-  padding: 0.4rem 0.75rem;
-  border-radius: 8px;
-  transition: all var(--rit-transition);
-}
-
-.rit-nav-link:hover, .rit-nav-link.active {
-  color: rgba(255, 255, 255, 0.95);
-  background: rgba(255, 255, 255, 0.06);
-}
-
-.rit-nav-link.active::after {
-  content: '';
-  position: absolute;
-  bottom: -2px;
-  left: 50%;
-  transform: translateX(-50%);
-  width: 16px;
-  height: 2px;
-  background: var(--rit-accent);
-  border-radius: 1px;
-}
-
-[data-theme="light"] .rit-nav-link {
-  color: rgba(0, 0, 0, 0.5);
-}
-
-[data-theme="light"] .rit-nav-link:hover,
-[data-theme="light"] .rit-nav-link.active {
-  color: rgba(0, 0, 0, 0.9);
-  background: rgba(0, 0, 0, 0.04);
-}
-
-/* ── 5. Brand ─────────────────────────────────────────────────────────────── */
-.brand-text {
-  background: linear-gradient(135deg, var(--rit-brand-from), var(--rit-brand-via), var(--rit-brand-to));
-  -webkit-background-clip: text;
-  -webkit-text-fill-color: transparent;
-  background-clip: text;
-  font-weight: 700;
-  letter-spacing: -0.03em;
-}
-
-.brand-text-sm {
-  background: linear-gradient(135deg, var(--rit-brand-from), var(--rit-brand-to));
-  -webkit-background-clip: text;
-  -webkit-text-fill-color: transparent;
-  background-clip: text;
-  font-weight: 600;
-}
-
-/* ── 6. Paper Card ────────────────────────────────────────────────────────── */
-.paper-card {
-  position: relative;
-  border-radius: var(--rit-radius);
-  border: 1px solid rgba(255, 255, 255, 0.06);
-  transition: all var(--rit-transition);
-  overflow: hidden;
-}
-
-.paper-card::before {
-  content: '';
-  position: absolute;
-  top: 0;
-  left: 0;
-  bottom: 0;
-  width: 3px;
-  background: var(--rit-card-accent, var(--rit-accent));
-  opacity: 0;
-  transition: opacity var(--rit-transition);
-}
-
-.paper-card:hover {
-  transform: translateY(-2px);
-  border-color: rgba(14, 165, 233, 0.15);
-  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2),
-              0 0 0 1px rgba(14, 165, 233, 0.08);
-}
-
-.paper-card:hover::before {
-  opacity: 1;
-}
-
-[data-theme="light"] .paper-card {
-  border-color: rgba(0, 0, 0, 0.06);
-}
-
-[data-theme="light"] .paper-card:hover {
-  border-color: rgba(14, 165, 233, 0.2);
-  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.06),
-              0 0 0 1px rgba(14, 165, 233, 0.1);
-}
-
-/* Card accent colors per category domain */
-.paper-card[data-cat^="cs"]      { --rit-card-accent: #38BDF8; }
-.paper-card[data-cat^="hep"],
-.paper-card[data-cat^="physics"],
-.paper-card[data-cat^="astro"],
-.paper-card[data-cat^="quant"],
-.paper-card[data-cat^="cond"]    { --rit-card-accent: #C084FC; }
-.paper-card[data-cat^="math"],
-.paper-card[data-cat^="stat"]    { --rit-card-accent: #34D399; }
-.paper-card[data-cat^="q-bio"]   { --rit-card-accent: #FBBF24; }
-.paper-card[data-cat^="econ"]    { --rit-card-accent: #FB7185; }
-.paper-card[data-cat^="eess"]    { --rit-card-accent: #FB923C; }
-
-/* Paper card title link */
-.paper-title {
-  font-weight: 600;
-  line-height: 1.4;
-  color: var(--rit-accent-light);
-  text-decoration: none;
-  transition: color var(--rit-transition);
-}
-
-.paper-title:hover {
-  color: var(--rit-accent);
-  text-decoration: underline;
-  text-decoration-color: rgba(14, 165, 233, 0.3);
-  text-underline-offset: 3px;
-}
-
-[data-theme="light"] .paper-title {
-  color: var(--rit-accent-dim);
-}
-
-[data-theme="light"] .paper-title:hover {
-  color: #0369A1;
-}
-
-/* Abstract expand/collapse */
-.abstract-text {
-  display: -webkit-box;
-  -webkit-line-clamp: 3;
-  -webkit-box-orient: vertical;
-  overflow: hidden;
-  transition: all 0.3s ease;
-}
-
-.abstract-text.expanded {
-  -webkit-line-clamp: unset;
-  display: block;
-}
-
-.abstract-toggle {
-  cursor: pointer;
-  color: var(--rit-accent);
-  font-size: 0.75rem;
-  font-weight: 500;
-  opacity: 0.8;
-  transition: opacity var(--rit-transition);
-  background: none;
-  border: none;
-  padding: 0;
+  /* surfaces */
+  --bg:         #FBFAF8;
+  --bg-2:       #F4F1EC;
+  --surface:    #FFFFFF;
+  --surface-2:  #F2EFEA;
+  --border:     #E5E1D9;
+  --border-2:   #D3CDC2;
+
+  /* text */
+  --text:       #1C1A16;
+  --text-2:     #58524A;
+  --text-3:     #8A837A;
+
+  /* accent — Save, active nav, focus */
+  --accent:     #2C5638;
+  --accent-2:   #3E7A4E;
+  --accent-bg:  #E4EFE5;
+  --accent-br:  #CADFCD;
+
+  /* semantic */
+  --danger:     #8E3033;
+  --danger-bg:  #F9E3E3;
+  --info:       #13528C;
+  --info-bg:    #DDEAFA;
+
+  /* highlight behind the abstract's lead sentence */
+  --mark:       #DDE9DA;
+
+  --shadow-1:   0 1px 2px rgba(28, 26, 22, .05);
+  --shadow-2:   0 1px 2px rgba(28, 26, 22, .05), 0 8px 24px -16px rgba(28, 26, 22, .25);
+
+  /* type */
+  --font-ui:    system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
+  --font-read:  Charter, "Bitstream Charter", "Sitka Text", Cambria, Georgia, serif;
+  --font-mono:  ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
+
+  /* metrics — feed width is set for READING measure (~68ch at .95rem serif),
+     not for filling the viewport. The old max-w-4xl (896px) ran well past the
+     line length reading research supports. */
+  --feed-w:     42rem;
+  --page-w:     64rem;
+  --radius:     10px;
+  --radius-sm:  6px;
+  --topbar-h:   3.25rem;
+}
+
+@media (prefers-color-scheme: dark) {
+  :root:not([data-theme="light"]) {
+    --bg:        #14120F;
+    --bg-2:      #100E0C;
+    --surface:   #1C1916;
+    --surface-2: #24211C;
+    --border:    #2C2823;
+    --border-2:  #3B3630;
+
+    --text:      #E8E3DB;
+    --text-2:    #A9A197;
+    --text-3:    #7C756B;
+
+    --accent:    #7FB58C;
+    --accent-2:  #A7D4B2;
+    --accent-bg: #263B2C;
+    --accent-br: #37543F;
+
+    --danger:    #E89B8C;
+    --danger-bg: #38201B;
+    --info:      #7FB6E8;
+    --info-bg:   #16283A;
+
+    --mark:      #2E3B2C;
+
+    --shadow-1:  0 1px 2px rgba(0, 0, 0, .4);
+    --shadow-2:  0 1px 2px rgba(0, 0, 0, .4), 0 10px 28px -20px rgba(0, 0, 0, .9);
+  }
 }
 
-.abstract-toggle:hover {
-  opacity: 1;
-}
+:root[data-theme="dark"] {
+  --bg:        #14120F;
+  --bg-2:      #100E0C;
+  --surface:   #1C1916;
+  --surface-2: #24211C;
+  --border:    #2C2823;
+  --border-2:  #3B3630;
 
-/* ── 7. Category Badges ───────────────────────────────────────────────────── */
-.cat-badge {
-  font-size: 0.625rem;
-  letter-spacing: 0.04em;
-  text-transform: uppercase;
-  font-weight: 600;
-  padding: 3px 8px;
-  border-radius: 6px;
-  white-space: nowrap;
-}
+  --text:      #E8E3DB;
+  --text-2:    #A9A197;
+  --text-3:    #7C756B;
 
-.cat-cs    { background: rgba(56,189,248,0.12);  color: #38BDF8; }
-.cat-phys  { background: rgba(192,132,252,0.12); color: #C084FC; }
-.cat-math  { background: rgba(52,211,153,0.12);  color: #34D399; }
-.cat-bio   { background: rgba(251,191,36,0.12);  color: #FBBF24; }
-.cat-econ  { background: rgba(251,113,133,0.12); color: #FB7185; }
-.cat-stat  { background: rgba(34,211,238,0.12);  color: #22D3EE; }
-.cat-eess  { background: rgba(251,146,60,0.12);  color: #FB923C; }
-.cat-other { background: rgba(148,163,184,0.1);  color: #94A3B8; }
+  --accent:    #7FB58C;
+  --accent-2:  #A7D4B2;
+  --accent-bg: #263B2C;
+  --accent-br: #37543F;
 
-[data-theme="light"] .cat-cs    { background: rgba(14,165,233,0.1);  color: #0284C7; }
-[data-theme="light"] .cat-phys  { background: rgba(168,85,247,0.1);  color: #7C3AED; }
-[data-theme="light"] .cat-math  { background: rgba(16,185,129,0.1);  color: #059669; }
-[data-theme="light"] .cat-bio   { background: rgba(245,158,11,0.1);  color: #B45309; }
-[data-theme="light"] .cat-econ  { background: rgba(244,63,94,0.1);   color: #E11D48; }
-[data-theme="light"] .cat-stat  { background: rgba(6,182,212,0.1);   color: #0891B2; }
-[data-theme="light"] .cat-eess  { background: rgba(249,115,22,0.1);  color: #C2410C; }
-[data-theme="light"] .cat-other { background: rgba(100,116,139,0.08); color: #475569; }
+  --danger:    #E89B8C;
+  --danger-bg: #38201B;
+  --info:      #7FB6E8;
+  --info-bg:   #16283A;
 
-/* ── 8. Action Buttons ────────────────────────────────────────────────────── */
-.rit-action-btn {
-  display: inline-flex;
-  align-items: center;
-  gap: 4px;
-  padding: 5px 12px;
-  border-radius: 8px;
-  font-size: 0.75rem;
-  font-weight: 500;
-  border: 1px solid transparent;
-  cursor: pointer;
-  transition: all var(--rit-transition);
-  background: none;
-}
+  --mark:      #2E3B2C;
 
-.rit-action-btn .btn-icon {
-  font-size: 0.875rem;
-  transition: transform 0.2s ease;
+  --shadow-1:  0 1px 2px rgba(0, 0, 0, .4);
+  --shadow-2:  0 1px 2px rgba(0, 0, 0, .4), 0 10px 28px -20px rgba(0, 0, 0, .9);
 }
 
-.rit-btn-save {
-  color: var(--rit-accent);
-  border-color: rgba(14, 165, 233, 0.2);
-  background: rgba(14, 165, 233, 0.06);
-}
+/* ── 2. Reset & base ─────────────────────────────────────────────────────── */
 
-.rit-btn-save:hover {
-  background: rgba(14, 165, 233, 0.15);
-  border-color: rgba(14, 165, 233, 0.3);
-  transform: translateY(-1px);
-}
+*, *::before, *::after { box-sizing: border-box; }
 
-.rit-btn-save:hover .btn-icon {
-  transform: scale(1.15);
-}
+html { -webkit-text-size-adjust: 100%; }
 
-.rit-btn-save.saved {
-  background: rgba(16, 185, 129, 0.12);
-  border-color: rgba(16, 185, 129, 0.3);
-  color: #10B981;
-}
-
-.rit-btn-dismiss {
-  color: rgba(255, 255, 255, 0.4);
-  border-color: transparent;
+body {
+  margin: 0;
+  min-height: 100vh;
+  background: var(--bg);
+  color: var(--text);
+  font-family: var(--font-ui);
+  font-size: 16px;
+  line-height: 1.55;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
 }
 
-.rit-btn-dismiss:hover {
-  color: #EF4444;
-  background: rgba(239, 68, 68, 0.08);
-  border-color: rgba(239, 68, 68, 0.15);
-}
+h1, h2, h3, h4, h5, p, figure { margin: 0; }
+ul, ol { margin: 0; padding: 0; }
+img, svg { display: block; max-width: 100%; }
+button { font: inherit; color: inherit; background: none; border: none; padding: 0; cursor: pointer; }
+input, textarea, select { font: inherit; color: inherit; }
+a { color: inherit; text-decoration: none; }
 
-.rit-btn-link {
-  color: rgba(255, 255, 255, 0.4);
-  border-color: transparent;
-}
+::selection { background: var(--accent-bg); color: var(--text); }
 
-.rit-btn-link:hover {
-  color: rgba(255, 255, 255, 0.8);
-  background: rgba(255, 255, 255, 0.06);
+/* One visible focus style everywhere. */
+:focus-visible {
+  outline: 2px solid var(--accent-2);
+  outline-offset: 2px;
+  border-radius: var(--radius-sm);
 }
 
-[data-theme="light"] .rit-btn-save {
-  color: #0284C7;
-  border-color: rgba(14, 165, 233, 0.25);
-  background: rgba(14, 165, 233, 0.06);
+/* Screen-reader-only, but still focusable. Used by the skip link and by the
+   feed's "load more" control's helper text. */
+.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;
 }
 
-[data-theme="light"] .rit-btn-dismiss {
-  color: rgba(0, 0, 0, 0.35);
+.skip-link {
+  position: absolute; left: .5rem; top: -3rem; z-index: 200;
+  background: var(--surface); color: var(--text);
+  border: 1px solid var(--border-2); border-radius: var(--radius-sm);
+  padding: .5rem .85rem; font-size: .85rem; font-weight: 550;
+  transition: top .15s ease;
 }
+.skip-link:focus { top: .5rem; }
 
-[data-theme="light"] .rit-btn-link {
-  color: rgba(0, 0, 0, 0.35);
-}
+/* ── 3. Layout ───────────────────────────────────────────────────────────── */
 
-[data-theme="light"] .rit-btn-link:hover {
-  color: rgba(0, 0, 0, 0.7);
-  background: rgba(0, 0, 0, 0.04);
-}
+.shell { display: flex; flex-direction: column; min-height: 100vh; }
 
-/* ── 9. Skeleton Loaders ──────────────────────────────────────────────────── */
-.skeleton-card {
-  border-radius: var(--rit-radius);
-  padding: 1.25rem;
-  border: 1px solid rgba(255, 255, 255, 0.04);
-  background: rgba(255, 255, 255, 0.02);
+.wrap {
+  width: 100%;
+  max-width: var(--page-w);
+  margin-inline: auto;
+  padding-inline: clamp(1rem, 4vw, 2rem);
 }
 
-[data-theme="light"] .skeleton-card {
-  border-color: rgba(0, 0, 0, 0.04);
-  background: rgba(0, 0, 0, 0.015);
-}
+.wrap--feed { max-width: calc(var(--feed-w) + 4rem); }
 
-.skeleton-line {
-  border-radius: 6px;
-  background: linear-gradient(
-    90deg,
-    rgba(148, 163, 184, 0.06) 25%,
-    rgba(148, 163, 184, 0.12) 50%,
-    rgba(148, 163, 184, 0.06) 75%
-  );
-  background-size: 200% 100%;
-  animation: shimmer 1.8s infinite ease-in-out;
-}
+main { flex: 1; padding-block: 1.5rem 4rem; }
 
-[data-theme="light"] .skeleton-line {
-  background: linear-gradient(
-    90deg,
-    rgba(100, 116, 139, 0.08) 25%,
-    rgba(100, 116, 139, 0.14) 50%,
-    rgba(100, 116, 139, 0.08) 75%
-  );
-  background-size: 200% 100%;
-  animation: shimmer 1.8s infinite ease-in-out;
-}
-
-.skeleton-line-title { height: 18px; width: 65%; }
-.skeleton-line-badge { height: 14px; width: 48px; border-radius: 4px; }
-.skeleton-line-meta  { height: 12px; width: 45%; }
-.skeleton-line-text  { height: 12px; width: 100%; }
-.skeleton-line-text-md { height: 12px; width: 82%; }
-.skeleton-line-text-sm { height: 12px; width: 55%; }
-.skeleton-line-btn   { height: 28px; width: 72px; border-radius: 8px; }
-
-/* ── 10. Toast Notifications ──────────────────────────────────────────────── */
-#toast-container {
-  position: fixed;
-  bottom: 80px;
-  right: 20px;
-  z-index: 9999;
-  display: flex;
-  flex-direction: column;
-  gap: 8px;
-  pointer-events: none;
+/* Mobile bottom nav is fixed; keep content clear of it and of the home
+   indicator on iOS. */
+@media (max-width: 719px) {
+  main { padding-bottom: calc(5.5rem + env(safe-area-inset-bottom, 0px)); }
 }
 
-@media (min-width: 768px) {
-  #toast-container {
-    bottom: 24px;
-    right: 24px;
-  }
-}
+.stack { display: flex; flex-direction: column; }
+.stack-2 { gap: .5rem; }
+.stack-3 { gap: .75rem; }
+.stack-4 { gap: 1rem; }
+.stack-6 { gap: 1.5rem; }
+.row { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }
+.row-between { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
+.grow { flex: 1; min-width: 0; }
 
-.rit-toast {
-  pointer-events: auto;
-  display: flex;
-  align-items: center;
-  gap: 8px;
-  padding: 10px 16px;
-  border-radius: 10px;
-  font-size: 0.8125rem;
-  font-weight: 500;
-  background: rgba(30, 35, 50, 0.95);
-  border: 1px solid rgba(255, 255, 255, 0.08);
-  color: #E2E8F0;
-  backdrop-filter: blur(12px);
-  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
-  animation: toastIn 0.3s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
-  max-width: 340px;
-}
+/* ── 4. Top bar ──────────────────────────────────────────────────────────
+   Solid, not glass. backdrop-filter blur+saturate is the default "AI SaaS"
+   navbar and it composites the whole scrolling feed underneath it on every
+   frame — a real cost on a 2-vCPU box with an infinite list below.        */
 
-[data-theme="light"] .rit-toast {
-  background: rgba(255, 255, 255, 0.95);
-  border-color: rgba(0, 0, 0, 0.08);
-  color: #1E293B;
-  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
+.topbar {
+  position: sticky; top: 0; z-index: 50;
+  height: var(--topbar-h);
+  background: var(--bg);
+  border-bottom: 1px solid var(--border);
 }
+.topbar .wrap { height: 100%; display: flex; align-items: center; gap: 1rem; }
 
-.rit-toast.toast-exit {
-  animation: toastOut 0.25s ease-in forwards;
+.brand {
+  display: inline-flex; align-items: center; gap: .5rem;
+  font-weight: 640; font-size: 1.02rem; letter-spacing: -.015em;
 }
-
-.rit-toast-icon {
-  font-size: 1rem;
-  flex-shrink: 0;
+.brand-mark {
+  width: 1.35rem; height: 1.35rem; flex: none;
+  color: var(--accent);
 }
 
-.rit-toast-success { border-left: 3px solid #10B981; }
-.rit-toast-error   { border-left: 3px solid #EF4444; }
-.rit-toast-info    { border-left: 3px solid var(--rit-accent); }
+.nav { display: none; align-items: center; gap: .15rem; margin-left: auto; }
+@media (min-width: 720px) { .nav { display: flex; } }
 
-/* ── 11. Coming Soon Badges ───────────────────────────────────────────────── */
-.coming-soon-wrapper {
+.nav-link {
   position: relative;
-  opacity: 0.5;
-  pointer-events: none;
-  cursor: default;
+  padding: .4rem .7rem; border-radius: var(--radius-sm);
+  font-size: .89rem; font-weight: 520; color: var(--text-2);
 }
-
-.coming-soon-wrapper.interactive {
-  pointer-events: auto;
-  cursor: pointer;
-}
-
-.coming-soon-badge {
-  display: inline-flex;
-  align-items: center;
-  gap: 4px;
-  font-size: 0.6rem;
-  font-weight: 600;
-  text-transform: uppercase;
-  letter-spacing: 0.06em;
-  padding: 2px 8px;
-  border-radius: 4px;
-  background: rgba(14, 165, 233, 0.1);
-  color: var(--rit-accent);
-  border: 1px solid rgba(14, 165, 233, 0.15);
-  white-space: nowrap;
-}
-
-.coming-soon-section {
-  position: relative;
-  padding: 1rem;
-  border-radius: var(--rit-radius);
-  border: 1px dashed rgba(255, 255, 255, 0.08);
-  background: rgba(255, 255, 255, 0.01);
+.nav-link:hover { color: var(--text); background: var(--surface-2); }
+.nav-link[aria-current="page"] { color: var(--text); font-weight: 580; }
+.nav-link[aria-current="page"]::after {
+  content: ""; position: absolute; left: .7rem; right: .7rem; bottom: -.05rem;
+  height: 2px; background: var(--accent); border-radius: 1px;
 }
 
-[data-theme="light"] .coming-soon-section {
-  border-color: rgba(0, 0, 0, 0.08);
-  background: rgba(0, 0, 0, 0.01);
+.icon-btn {
+  display: inline-flex; align-items: center; justify-content: center;
+  width: 2rem; height: 2rem; border-radius: var(--radius-sm);
+  color: var(--text-2);
 }
+.icon-btn:hover { background: var(--surface-2); color: var(--text); }
+.icon-btn svg { width: 1.05rem; height: 1.05rem; }
 
-/* ── 12. Mobile Bottom Nav ────────────────────────────────────────────────── */
-.rit-bottom-nav {
-  position: fixed;
-  bottom: 0;
-  left: 0;
-  right: 0;
-  z-index: 100;
-  display: none;
-  background: rgba(11, 13, 20, 0.92);
-  backdrop-filter: blur(20px);
-  border-top: 1px solid rgba(255, 255, 255, 0.06);
-  padding: 6px 0 env(safe-area-inset-bottom, 8px);
+/* Theme toggle shows exactly one icon; JS never has to guess. */
+.theme-toggle .i-moon { display: none; }
+.theme-toggle .i-sun  { display: block; }
+@media (prefers-color-scheme: dark) {
+  :root:not([data-theme="light"]) .theme-toggle .i-moon { display: block; }
+  :root:not([data-theme="light"]) .theme-toggle .i-sun  { display: none; }
 }
+:root[data-theme="dark"] .theme-toggle .i-moon { display: block; }
+:root[data-theme="dark"] .theme-toggle .i-sun  { display: none; }
+:root[data-theme="light"] .theme-toggle .i-moon { display: none; }
+:root[data-theme="light"] .theme-toggle .i-sun  { display: block; }
 
-[data-theme="light"] .rit-bottom-nav {
-  background: rgba(255, 255, 255, 0.92);
-  border-top-color: rgba(0, 0, 0, 0.06);
-}
+/* ── 5. Bottom nav (mobile) ──────────────────────────────────────────────── */
 
-@media (max-width: 767px) {
-  .rit-bottom-nav { display: flex; }
-  body { padding-bottom: 68px; }
+.botnav {
+  position: fixed; z-index: 60; left: 0; right: 0; bottom: 0;
+  display: flex; align-items: stretch;
+  background: var(--bg);
+  border-top: 1px solid var(--border);
+  padding-bottom: env(safe-area-inset-bottom, 0px);
 }
+@media (min-width: 720px) { .botnav { display: none; } }
 
-.rit-bottom-nav-item {
+.botnav-item {
   flex: 1;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  gap: 2px;
-  padding: 6px 0;
-  color: rgba(255, 255, 255, 0.4);
-  font-size: 0.625rem;
-  font-weight: 500;
-  text-decoration: none;
-  transition: color var(--rit-transition);
-}
-
-.rit-bottom-nav-item svg {
-  width: 22px;
-  height: 22px;
-  transition: transform var(--rit-transition);
-}
-
-.rit-bottom-nav-item:hover,
-.rit-bottom-nav-item.active {
-  color: var(--rit-accent);
-}
-
-.rit-bottom-nav-item.active svg {
-  transform: scale(1.1);
-}
-
-[data-theme="light"] .rit-bottom-nav-item {
-  color: rgba(0, 0, 0, 0.35);
-}
-
-[data-theme="light"] .rit-bottom-nav-item:hover,
-[data-theme="light"] .rit-bottom-nav-item.active {
-  color: var(--rit-accent-dim);
-}
-
-/* ── 13. Onboarding ───────────────────────────────────────────────────────── */
-.category-tile {
-  cursor: pointer;
-  border: 2px solid rgba(255, 255, 255, 0.06);
-  border-radius: 12px;
-  padding: 1rem;
-  transition: all var(--rit-transition);
-  user-select: none;
-  text-align: center;
-  position: relative;
-  background: rgba(255, 255, 255, 0.02);
-}
-
-[data-theme="light"] .category-tile {
-  background: rgba(255, 255, 255, 0.8);
-  border-color: rgba(0, 0, 0, 0.06);
-}
-
-.category-tile:hover {
-  border-color: rgba(14, 165, 233, 0.3);
-  transform: translateY(-2px);
-  box-shadow: 0 4px 20px var(--rit-accent-glow);
-}
-
-.category-tile.selected {
-  border-color: var(--rit-accent);
-  background: rgba(14, 165, 233, 0.06);
-  box-shadow: 0 0 0 1px rgba(14, 165, 233, 0.2),
-              0 4px 20px var(--rit-accent-glow);
-}
-
-.category-tile .tile-icon {
-  font-size: 2rem;
-  margin-bottom: 0.5rem;
-  display: block;
-}
-
-.category-tile .tile-name {
-  font-weight: 600;
-  font-size: 0.8rem;
-  margin-bottom: 0.2rem;
-}
-
-.category-tile .tile-desc {
-  font-size: 0.65rem;
-  opacity: 0.5;
-  line-height: 1.3;
-}
-
-.category-tile .check-mark {
-  position: absolute;
-  top: 8px;
-  right: 8px;
-  width: 22px;
-  height: 22px;
-  border-radius: 50%;
-  background: var(--rit-accent);
-  color: white;
-  display: none;
-  align-items: center;
-  justify-content: center;
-  font-size: 0.65rem;
-  font-weight: 700;
-  animation: checkPop 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
-}
-
-.category-tile.selected .check-mark {
-  display: flex;
-}
-
-/* Onboarding progress dots */
-.step-dot {
-  width: 10px;
-  height: 10px;
-  border-radius: 50%;
-  background: rgba(148, 163, 184, 0.2);
-  transition: all 0.3s ease;
-}
-
-.step-dot.active {
-  background: var(--rit-accent);
-  box-shadow: 0 0 10px var(--rit-accent-glow-strong);
-  transform: scale(1.3);
-}
-
-.step-dot.completed {
-  background: #10B981;
-}
-
-/* Onboarding seed progress bar */
-.seed-progress-track {
-  height: 4px;
-  background: rgba(255, 255, 255, 0.06);
-  border-radius: 2px;
-  overflow: hidden;
-}
-
-.seed-progress-fill {
-  height: 100%;
-  background: linear-gradient(90deg, var(--rit-brand-from), var(--rit-brand-to));
-  border-radius: 2px;
-  transition: width 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
-}
-
-/* ── 14. AI Summary Card ──────────────────────────────────────────────────── */
-.ai-summary-card {
-  position: relative;
-  background: rgba(14, 165, 233, 0.04);
-  border-radius: var(--rit-radius);
-  padding: 1.25rem;
-  margin-bottom: 1rem;
+  display: flex; flex-direction: column; align-items: center; justify-content: center;
+  gap: .15rem; padding: .5rem 0 .45rem;
+  font-size: .68rem; font-weight: 540; color: var(--text-3);
+  min-height: 3.25rem;
+}
+.botnav-item svg { width: 1.25rem; height: 1.25rem; }
+.botnav-item[aria-current="page"] { color: var(--accent); }
+
+/* ── 6. Buttons ──────────────────────────────────────────────────────────── */
+
+.btn {
+  display: inline-flex; align-items: center; justify-content: center; gap: .4em;
+  font-family: var(--font-ui); font-size: .87rem; font-weight: 550;
+  padding: .5em 1em; border-radius: var(--radius-sm);
+  border: 1px solid transparent; white-space: nowrap;
+  transition: background .12s ease, border-color .12s ease, color .12s ease;
+}
+.btn svg { width: 1em; height: 1em; }
+.btn-primary { background: var(--accent); color: var(--bg); border-color: var(--accent); }
+:root[data-theme="dark"] .btn-primary,
+.btn-primary { color: #FBFAF8; }
+@media (prefers-color-scheme: dark) {
+  :root:not([data-theme="light"]) .btn-primary { color: #14120F; }
+}
+:root[data-theme="dark"] .btn-primary { color: #14120F; }
+.btn-primary:hover { background: var(--accent-2); border-color: var(--accent-2); }
+
+.btn-quiet { background: transparent; color: var(--text-2); border-color: var(--border-2); }
+.btn-quiet:hover { background: var(--surface-2); color: var(--text); }
+
+.btn-ghost { background: transparent; color: var(--text-3); }
+.btn-ghost:hover { color: var(--text); background: var(--surface-2); }
+
+.btn-sm { font-size: .81rem; padding: .4em .8em; }
+
+/* ── 7. Paper card ───────────────────────────────────────────────────────
+   Anatomy, top to bottom:
+     meta line   one dim mono row — category, year, citations
+     title       the largest thing on the card; the only element users
+                 reliably read (NN/g F-pattern eyetracking)
+     authors     small, dim
+     abstract    lead sentence marked, remainder dimmed
+     actions     Save / Pass / Why this
+   The old card gave five facts five different visual treatments (coloured
+   badge pulled right, year pill, mono id, authors, citation count + icon)
+   and they competed with the title. */
+
+.feed { display: flex; flex-direction: column; gap: .85rem; }
+
+.card {
+  background: var(--surface);
+  border: 1px solid var(--border);
+  border-radius: var(--radius);
+  padding: 1.05rem 1.1rem 0.95rem;
+  display: flex; flex-direction: column; gap: .55rem;
+  box-shadow: var(--shadow-1);
+  /* No fixed height anywhere: WCAG 2.2 SC 1.4.12 requires the layout to
+     survive a user forcing line-height 1.5x / spacing 2x / letter .12em /
+     word .16em without clipping. Everything here reflows. */
+}
+@media (min-width: 720px) { .card { padding: 1.25rem 1.35rem 1.1rem; } }
+
+.card-meta {
+  display: flex; align-items: center; gap: .45rem; flex-wrap: wrap;
+  font-family: var(--font-mono); font-size: .7rem; letter-spacing: .02em;
+  color: var(--text-3); font-variant-numeric: tabular-nums;
+}
+.card-meta .sep { opacity: .45; }
+
+.card-title {
+  font-family: var(--font-read);
+  font-size: 1.14rem; line-height: 1.32; font-weight: 600;
+  letter-spacing: -.005em; text-wrap: balance;
+  color: var(--text);
+}
+@media (min-width: 720px) { .card-title { font-size: 1.2rem; } }
+a.card-title:hover { color: var(--accent); }
+
+.card-authors { font-size: .82rem; color: var(--text-3); }
+
+.card-abstract {
+  font-family: var(--font-read);
+  font-size: .95rem; line-height: 1.62; color: var(--text-2);
+}
+/* The lead sentence carries the paper's claim ~always, and NN/g's eyetracking
+   shows attention decays sharply after the first couple of lines — so it is
+   emphasised rather than buried at character 400. Approximates Scholar
+   Inbox's "highlight the sentence most related to the core idea". */
+.card-abstract .lead {
+  color: var(--text); font-weight: 500;
+  box-shadow: inset 0 -.45em 0 var(--mark);
+}
+.card-abstract .rest { color: var(--text-3); }
+
+.card-abstract.is-clamped .rest { display: none; }
+
+.card-more {
+  align-self: flex-start;
+  font-size: .78rem; font-weight: 550; color: var(--text-3);
+  padding: .15rem 0;
+}
+.card-more:hover { color: var(--accent); }
+
+.card-actions {
+  display: flex; align-items: center; gap: .4rem; flex-wrap: wrap;
+  padding-top: .2rem;
+}
+.card-why { margin-left: auto; }
+
+.btn-save { background: var(--accent-bg); color: var(--accent); border-color: var(--accent-br); }
+.btn-save:hover { background: var(--accent-br); }
+.btn-save[disabled] { opacity: 1; cursor: default; }
+
+.btn-pass { background: transparent; color: var(--text-3); border-color: var(--border); }
+.btn-pass:hover { background: var(--surface-2); color: var(--text-2); }
+
+/* Deep link into the 3D map. Quiet by default — it is a side door, not a
+   primary action, and it must not compete with Save. */
+.card-map {
+  display: inline-flex; align-items: center; gap: .35rem;
+  align-self: flex-start;
+  font-size: .78rem; font-weight: 520; color: var(--text-3);
+}
+.card-map svg { width: .85rem; height: .85rem; }
+.card-map:hover { color: var(--accent); }
+
+/* "Why this?" — the serving tier already knows why each paper was retrieved
+   (candidate_source); this surfaces it instead of the old Coming Soon badge. */
+.card-reason {
+  font-size: .82rem; line-height: 1.5; color: var(--text-3);
+  border-left: 2px solid var(--accent-br);
+  padding: .1rem 0 .1rem .6rem; margin-top: .1rem;
+}
+
+/* Dismiss animation. The card is only hidden here — the POST is deferred so
+   Undo can cancel it outright (see app.js). */
+.card.is-leaving {
+  animation: card-leave .18s ease forwards;
   overflow: hidden;
-  border: 1px solid rgba(14, 165, 233, 0.1);
-}
-
-[data-theme="light"] .ai-summary-card {
-  background: rgba(14, 165, 233, 0.03);
-  border-color: rgba(14, 165, 233, 0.12);
 }
-
-.ai-summary-card::before {
-  content: "";
-  position: absolute;
-  top: 0;
-  left: 0;
-  right: 0;
-  height: 2px;
-  background: linear-gradient(90deg, var(--rit-brand-from), var(--rit-brand-via), var(--rit-brand-to));
-  background-size: 200% auto;
-  animation: shimmer 3s linear infinite;
-}
-
-/* ── 15. Search Enhancements ──────────────────────────────────────────────── */
-.rit-search-wrapper {
-  position: relative;
-}
-
-.rit-search-wrapper::before {
-  content: '';
-  position: absolute;
-  inset: -2px;
-  border-radius: calc(var(--rit-radius) + 2px);
-  background: linear-gradient(135deg, var(--rit-brand-from), var(--rit-brand-via), var(--rit-brand-to));
-  opacity: 0;
-  transition: opacity 0.4s ease;
-  z-index: -1;
-}
-
-.rit-search-wrapper:focus-within::before {
-  opacity: 0.15;
-}
-
-.rit-search-input {
+@keyframes card-leave {
+  to { opacity: 0; transform: translateX(-8px); max-height: 0;
+       padding-block: 0; margin-bottom: -.85rem; }
+}
+
+/* ── 8. Category chips ───────────────────────────────────────────────────
+   Radix Colors step semantics: step 3 as the chip background, step 11 as its
+   text, with a matched dark variant. Every chip therefore carries identical
+   visual weight and guaranteed legibility, and reassigning a category to a
+   different hue can never change its contrast. Green is deliberately absent —
+   it is reserved for Save, and a green chip would read as "saved". */
+
+.cat {
+  font-family: var(--font-mono); font-weight: 600;
+  font-size: .68rem; letter-spacing: .02em;
+  padding: .2em .45em; border-radius: 4px;
+  background: var(--surface-2); color: var(--text-2);
+}
+.cat-cl   { background: #D6EDF0; color: #0A5C66; }
+.cat-cv   { background: #DDEAFA; color: #13528C; }
+.cat-lg   { background: #E2E6F8; color: #31418D; }
+.cat-ai   { background: #EDE5F6; color: #612E88; }
+.cat-ro   { background: #F9E7D6; color: #8A4816; }
+.cat-phys { background: #F5EBD0; color: #75540C; }
+.cat-astro{ background: #F6E2ED; color: #892D5D; }
+.cat-math { background: #E8ECDB; color: #4D591C; }
+.cat-bio  { background: #D9EDEA; color: #0C5B4E; }
+.cat-eng  { background: #E4E8EA; color: #3E4C53; }
+
+@media (prefers-color-scheme: dark) {
+  :root:not([data-theme="light"]) .cat-cl   { background: #0F2E33; color: #63CCD8; }
+  :root:not([data-theme="light"]) .cat-cv   { background: #12283F; color: #6EB6F5; }
+  :root:not([data-theme="light"]) .cat-lg   { background: #1A2140; color: #93A4F5; }
+  :root:not([data-theme="light"]) .cat-ai   { background: #271A3B; color: #C193F0; }
+  :root:not([data-theme="light"]) .cat-ro   { background: #33220F; color: #F0A468; }
+  :root:not([data-theme="light"]) .cat-phys { background: #2E2711; color: #DDBB55; }
+  :root:not([data-theme="light"]) .cat-astro{ background: #331A2A; color: #EE8CC0; }
+  :root:not([data-theme="light"]) .cat-math { background: #232811; color: #B8C96A; }
+  :root:not([data-theme="light"]) .cat-bio  { background: #0F2E2A; color: #63CCB4; }
+  :root:not([data-theme="light"]) .cat-eng  { background: #1E262A; color: #9BB0BA; }
+}
+:root[data-theme="dark"] .cat-cl   { background: #0F2E33; color: #63CCD8; }
+:root[data-theme="dark"] .cat-cv   { background: #12283F; color: #6EB6F5; }
+:root[data-theme="dark"] .cat-lg   { background: #1A2140; color: #93A4F5; }
+:root[data-theme="dark"] .cat-ai   { background: #271A3B; color: #C193F0; }
+:root[data-theme="dark"] .cat-ro   { background: #33220F; color: #F0A468; }
+:root[data-theme="dark"] .cat-phys { background: #2E2711; color: #DDBB55; }
+:root[data-theme="dark"] .cat-astro{ background: #331A2A; color: #EE8CC0; }
+:root[data-theme="dark"] .cat-math { background: #232811; color: #B8C96A; }
+:root[data-theme="dark"] .cat-bio  { background: #0F2E2A; color: #63CCB4; }
+:root[data-theme="dark"] .cat-eng  { background: #1E262A; color: #9BB0BA; }
+
+/* ── 9. Section headers, pills, notices ──────────────────────────────────── */
+
+.sec-head {
+  display: flex; align-items: baseline; justify-content: space-between;
+  gap: 1rem; margin-bottom: .8rem;
+}
+.sec-title { font-size: 1.02rem; font-weight: 620; letter-spacing: -.012em; }
+
+.pill {
+  font-family: var(--font-mono); font-size: .68rem; letter-spacing: .04em;
+  padding: .22em .5em; border-radius: 4px;
+  background: var(--surface-2); color: var(--text-3);
+  font-variant-numeric: tabular-nums;
+}
+.pill-accent { background: var(--accent-bg); color: var(--accent); }
+
+.notice {
+  display: flex; align-items: flex-start; gap: .6rem;
+  padding: .7rem .85rem; border-radius: var(--radius-sm);
+  background: var(--surface-2); border: 1px solid var(--border);
+  font-size: .87rem; color: var(--text-2);
+}
+
+/* ── 10. Empty / end states ──────────────────────────────────────────────── */
+
+.empty {
+  display: flex; flex-direction: column; align-items: center; gap: .7rem;
+  text-align: center; padding: 3.5rem 1rem; max-width: 30rem; margin-inline: auto;
+}
+.empty-title { font-family: var(--font-read); font-size: 1.15rem; font-weight: 600; }
+.empty-body { font-size: .9rem; color: var(--text-3); }
+
+.feed-end {
+  text-align: center; padding: 2rem 1rem 1rem;
+  font-size: .85rem; color: var(--text-3);
+}
+
+/* ── 11. Feed loader (infinite scroll) ───────────────────────────────────
+   A real <button>, not a bare sentinel div. NN/g's infinite-scroll findings:
+   screen-reader users "will only see the first chunk of the list, without
+   being able to trigger the loading of new content", and a list with no
+   terminus also breaks footer access and hides whether more exists.
+   Carrying hx-trigger="revealed, click" makes one element serve both — it
+   auto-fires on scroll and stays keyboard-focusable and activatable. */
+
+.feed-more {
+  display: flex; align-items: center; justify-content: center; gap: .5rem;
+  width: 100%; padding: .9rem 1rem; margin-top: .3rem;
+  border: 1px dashed var(--border-2); border-radius: var(--radius);
+  color: var(--text-3); font-size: .85rem; font-weight: 540;
   background: transparent;
-  border: none;
-  outline: none;
-  font-size: 1rem;
-  width: 100%;
-  padding: 0.75rem 1rem;
-  color: inherit;
-}
-
-.rit-search-input::placeholder {
-  color: rgba(255, 255, 255, 0.3);
-}
-
-[data-theme="light"] .rit-search-input::placeholder {
-  color: rgba(0, 0, 0, 0.3);
-}
-
-/* ── 16. Pills & Badges ───────────────────────────────────────────────────── */
-.stat-pill {
-  display: inline-flex;
-  align-items: center;
-  gap: 4px;
-  padding: 4px 12px;
-  border-radius: 9999px;
-  font-size: 0.7rem;
-  font-weight: 500;
 }
+.feed-more:hover { color: var(--text-2); background: var(--surface-2); border-style: solid; }
+.feed-more .spinner { display: none; }
+.feed-more.htmx-request .spinner { display: block; }
+.feed-more.htmx-request .label { opacity: .55; }
 
-.year-pill {
-  font-size: 0.65rem;
-  font-weight: 600;
-  padding: 2px 6px;
-  border-radius: 5px;
-  background: rgba(148, 163, 184, 0.1);
-  color: #94A3B8;
+.spinner {
+  width: 1rem; height: 1rem; flex: none;
+  border: 2px solid var(--border-2); border-top-color: var(--accent);
+  border-radius: 50%; animation: spin .6s linear infinite;
 }
+@keyframes spin { to { transform: rotate(360deg); } }
 
-.year-pill.recent {
-  background: rgba(16, 185, 129, 0.1);
-  color: #34D399;
-}
-
-[data-theme="light"] .year-pill {
-  background: rgba(100, 116, 139, 0.1);
-  color: #475569;
-}
-
-[data-theme="light"] .year-pill.recent {
-  background: rgba(16, 185, 129, 0.1);
-  color: #059669;
-}
-
-.cite-count {
-  font-size: 0.7rem;
-  display: inline-flex;
-  align-items: center;
-  gap: 3px;
-  color: #94A3B8;
-}
-
-[data-theme="light"] .cite-count {
-  color: #64748B;
-}
-
-/* ── 17. Progress Messages ────────────────────────────────────────────────── */
-.rit-progress-container {
-  text-align: center;
-  padding: 1rem 0;
-}
-
-.rit-progress-msg {
-  font-size: 0.8125rem;
-  font-weight: 500;
-  color: rgba(255, 255, 255, 0.5);
-  animation: fadeInUp 0.4s ease;
-}
-
-[data-theme="light"] .rit-progress-msg {
-  color: rgba(0, 0, 0, 0.45);
-}
-
-.rit-progress-dots {
-  display: inline-flex;
-  gap: 4px;
-  margin-left: 4px;
-}
-
-.rit-progress-dots span {
-  width: 4px;
-  height: 4px;
-  border-radius: 50%;
-  background: var(--rit-accent);
-  animation: dotPulse 1.4s ease-in-out infinite;
-}
-
-.rit-progress-dots span:nth-child(2) { animation-delay: 0.2s; }
-.rit-progress-dots span:nth-child(3) { animation-delay: 0.4s; }
-
-/* ── 18. Seed Card ────────────────────────────────────────────────────────── */
-.seed-card {
-  padding: 0.75rem 1rem;
-  border-radius: var(--rit-radius-sm);
-  border: 1px solid rgba(255, 255, 255, 0.05);
-  background: rgba(255, 255, 255, 0.02);
-  transition: all var(--rit-transition);
-}
-
-[data-theme="light"] .seed-card {
-  background: rgba(255, 255, 255, 0.8);
-  border-color: rgba(0, 0, 0, 0.06);
-}
-
-.seed-card:hover {
-  border-color: rgba(14, 165, 233, 0.2);
-  background: rgba(14, 165, 233, 0.02);
-}
-
-/* ── 19. Footer ───────────────────────────────────────────────────────────── */
-.app-footer {
-  border-top: 1px solid rgba(255, 255, 255, 0.04);
-  margin-top: 4rem;
-  padding: 2rem 0;
-  text-align: center;
-  color: rgba(255, 255, 255, 0.3);
-  font-size: 0.75rem;
-}
-
-[data-theme="light"] .app-footer {
-  border-top-color: rgba(0, 0, 0, 0.04);
-  color: rgba(0, 0, 0, 0.35);
-}
-
-.footer-tech-badge {
-  display: inline-flex;
-  align-items: center;
-  gap: 3px;
-  padding: 2px 8px;
-  border-radius: 4px;
-  font-size: 0.625rem;
-  font-weight: 500;
-  background: rgba(255, 255, 255, 0.04);
-  color: rgba(255, 255, 255, 0.4);
-  border: 1px solid rgba(255, 255, 255, 0.04);
-}
-
-[data-theme="light"] .footer-tech-badge {
-  background: rgba(0, 0, 0, 0.03);
-  color: rgba(0, 0, 0, 0.4);
-  border-color: rgba(0, 0, 0, 0.04);
-}
+/* ── 12. Skeletons ───────────────────────────────────────────────────────
+   Nielsen's response-time limits: under 0.1s feels instant, up to 1s keeps
+   flow, and beyond that the user needs feedback. Tier 1 of this pipeline is
+   multi-second, so a skeleton that mirrors the real card's geometry is
+   load-bearing, not decoration — it also prevents the layout shift that a
+   spinner-then-content swap causes. */
 
-/* ── 20. Scrollbar ────────────────────────────────────────────────────────── */
-[data-theme="dark"] ::-webkit-scrollbar { width: 6px; }
-[data-theme="dark"] ::-webkit-scrollbar-track { background: transparent; }
-[data-theme="dark"] ::-webkit-scrollbar-thumb {
-  background: rgba(14, 165, 233, 0.2);
-  border-radius: 3px;
-}
-[data-theme="dark"] ::-webkit-scrollbar-thumb:hover {
-  background: rgba(14, 165, 233, 0.35);
-}
-
-/* ── 21. HTMX Transitions ─────────────────────────────────────────────────── */
-.htmx-swapping {
-  opacity: 0;
-  transition: opacity 0.15s ease-out;
+.skel-card {
+  background: var(--surface); border: 1px solid var(--border);
+  border-radius: var(--radius); padding: 1.05rem 1.1rem;
+  display: flex; flex-direction: column; gap: .6rem;
 }
+@media (min-width: 720px) { .skel-card { padding: 1.25rem 1.35rem; } }
 
-.htmx-added {
-  opacity: 0;
-}
-
-.htmx-settling {
-  opacity: 1;
-  transition: opacity 0.25s ease-in;
+.skel {
+  height: .7rem; border-radius: 4px;
+  background: linear-gradient(90deg, var(--surface-2) 25%, var(--border) 50%, var(--surface-2) 75%);
+  background-size: 200% 100%;
+  animation: shimmer 1.4s ease-in-out infinite;
+}
+@keyframes shimmer { to { background-position: -200% 0; } }
+
+.skel-meta   { width: 42%; height: .6rem; }
+.skel-title  { width: 92%; height: 1.05rem; }
+.skel-title2 { width: 64%; height: 1.05rem; }
+.skel-auth   { width: 38%; height: .62rem; }
+.skel-text   { width: 100%; }
+.skel-text-2 { width: 96%; }
+.skel-text-3 { width: 71%; }
+.skel-btn    { width: 4.6rem; height: 1.9rem; border-radius: var(--radius-sm); }
+
+/* ── 13. Toast (undo) ────────────────────────────────────────────────────
+   NN/g on repetitive destructive actions: "if the action is highly repetitive
+   and asking for confirmations would be tedious, support easy undo. Make sure
+   that the undo option is highly salient on the screen." A confirm dialog
+   would tax every user who meant it. */
+
+.toasts {
+  position: fixed; z-index: 100; left: 50%; transform: translateX(-50%);
+  bottom: calc(1rem + env(safe-area-inset-bottom, 0px));
+  display: flex; flex-direction: column-reverse; gap: .5rem;
+  width: min(24rem, calc(100vw - 2rem));
+  pointer-events: none;
 }
+@media (max-width: 719px) { .toasts { bottom: calc(4.6rem + env(safe-area-inset-bottom, 0px)); } }
+@media (min-width: 720px) { .toasts { left: auto; right: 1.25rem; transform: none; } }
 
-/* ── 22. Mobile Menu ──────────────────────────────────────────────────────── */
-.mobile-menu-toggle:checked ~ .mobile-menu {
-  display: flex;
-}
+.toast {
+  pointer-events: auto;
+  display: flex; align-items: center; gap: .75rem;
+  padding: .65rem .75rem .65rem .95rem;
+  background: var(--surface); color: var(--text);
+  border: 1px solid var(--border-2); border-radius: var(--radius);
+  box-shadow: var(--shadow-2); font-size: .87rem;
+  animation: toast-in .18s ease;
+}
+.toast .msg { flex: 1; min-width: 0; }
+.toast .undo {
+  font-weight: 620; color: var(--accent); font-size: .85rem;
+  padding: .25rem .5rem; border-radius: var(--radius-sm);
+}
+.toast .undo:hover { background: var(--accent-bg); }
+.toast.is-out { animation: toast-out .16s ease forwards; }
+@keyframes toast-in  { from { opacity: 0; transform: translateY(6px); } }
+@keyframes toast-out { to   { opacity: 0; transform: translateY(6px); } }
 
-.mobile-menu {
-  display: none;
-  flex-direction: column;
-  position: absolute;
-  top: 100%;
-  left: 0;
-  right: 0;
-  background: rgba(11, 13, 20, 0.96);
-  backdrop-filter: blur(20px);
-  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
-  padding: 0.75rem;
-  z-index: 50;
-  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.4);
-}
+/* ── 14. Search ──────────────────────────────────────────────────────────── */
 
-[data-theme="light"] .mobile-menu {
-  background: rgba(255, 255, 255, 0.96);
-  border-bottom-color: rgba(0, 0, 0, 0.06);
-  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.1);
+.searchbar {
+  display: flex; align-items: center; gap: .5rem;
+  background: var(--surface); border: 1px solid var(--border-2);
+  border-radius: var(--radius); padding: .35rem .35rem .35rem .8rem;
+  box-shadow: var(--shadow-1);
+}
+.searchbar:focus-within { border-color: var(--accent-2); }
+.searchbar svg { width: 1.05rem; height: 1.05rem; color: var(--text-3); flex: none; }
+.searchbar input {
+  flex: 1; min-width: 0; border: 0; outline: 0; background: none;
+  padding: .5rem 0; font-size: .97rem;
 }
+.searchbar input::placeholder { color: var(--text-3); }
 
-/* ── 23. Utilities ─────────────────────────────────────────────────────────── */
-.fade-in {
-  animation: fadeInUp 0.4s ease-out;
+.search-meta {
+  font-family: var(--font-mono); font-size: .7rem; color: var(--text-3);
+  display: flex; flex-wrap: wrap; gap: .25rem .8rem;
+  font-variant-numeric: tabular-nums;
+}
+
+.ai-summary {
+  border-left: 2px solid var(--accent-br);
+  background: var(--surface-2);
+  border-radius: var(--radius-sm);
+  padding: .85rem 1rem;
+  font-family: var(--font-read); font-size: .93rem; line-height: 1.6;
+  color: var(--text-2);
+}
+.ai-summary strong { color: var(--text); font-weight: 620; }
+.ai-summary .label {
+  display: block; font-family: var(--font-mono); font-size: .64rem;
+  letter-spacing: .09em; text-transform: uppercase; color: var(--text-3);
+  margin-bottom: .35rem;
+}
+
+/* ── 15. Onboarding ──────────────────────────────────────────────────────── */
+
+.ob-step { display: flex; flex-direction: column; gap: 1.25rem; }
+.ob-head { display: flex; flex-direction: column; gap: .4rem; }
+.ob-kicker {
+  font-family: var(--font-mono); font-size: .68rem; letter-spacing: .1em;
+  text-transform: uppercase; color: var(--accent);
+}
+.ob-title {
+  font-family: var(--font-read); font-size: 1.5rem; line-height: 1.2;
+  font-weight: 620; letter-spacing: -.01em; text-wrap: balance;
+}
+.ob-sub { font-size: .92rem; color: var(--text-3); max-width: 46ch; }
+
+.cat-grid {
+  display: grid; gap: .55rem;
+  grid-template-columns: repeat(auto-fill, minmax(9.5rem, 1fr));
+}
+.cat-opt {
+  display: flex; flex-direction: column; gap: .2rem; text-align: left;
+  padding: .7rem .8rem; border-radius: var(--radius-sm);
+  border: 1px solid var(--border); background: var(--surface);
+  transition: border-color .12s ease, background .12s ease;
+}
+.cat-opt:hover { border-color: var(--border-2); }
+.cat-opt[aria-pressed="true"] {
+  border-color: var(--accent); background: var(--accent-bg);
+}
+.cat-opt .name { font-size: .87rem; font-weight: 560; }
+.cat-opt .desc { font-size: .75rem; color: var(--text-3); line-height: 1.4; }
+.cat-opt[aria-pressed="true"] .name { color: var(--accent); }
+
+.ob-progress {
+  display: flex; align-items: center; gap: .5rem;
+  font-family: var(--font-mono); font-size: .72rem; color: var(--text-3);
+  font-variant-numeric: tabular-nums;
+}
+.ob-bar { flex: 1; height: 3px; border-radius: 2px; background: var(--surface-2); overflow: hidden; }
+.ob-bar > i { display: block; height: 100%; background: var(--accent); transition: width .25s ease; }
+
+.ob-actions { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; }
+
+.ob-footer {
+  position: fixed; left: 0; right: 0; bottom: 0; z-index: 60;
+  background: var(--bg); border-top: 1px solid var(--border);
+  padding: .75rem 0 calc(.75rem + env(safe-area-inset-bottom, 0px));
+}
+
+/* Seed picker rows — denser than a feed card, because this is a pick list and
+   the decision is "is this roughly my field?", not "do I want to read it now?" */
+.seed-row {
+  display: flex; align-items: flex-start; gap: .9rem;
+  padding: .8rem .95rem; background: var(--surface);
+  border: 1px solid var(--border); border-radius: var(--radius-sm);
 }
-
-.line-clamp-1 {
-  display: -webkit-box;
-  -webkit-line-clamp: 1;
-  -webkit-box-orient: vertical;
-  overflow: hidden;
+.seed-title {
+  font-family: var(--font-read); font-size: .95rem; line-height: 1.35;
+  font-weight: 560; color: var(--text); display: block;
 }
+.seed-title:hover { color: var(--accent); }
 
-.line-clamp-3 {
-  display: -webkit-box;
-  -webkit-line-clamp: 3;
-  -webkit-box-orient: vertical;
-  overflow: hidden;
-}
+/* ── 16. Utilities ───────────────────────────────────────────────────────── */
 
-/* Error state */
-.rit-error-state {
-  text-align: center;
-  padding: 3rem 1.5rem;
-  border-radius: var(--rit-radius);
-  border: 1px dashed rgba(239, 68, 68, 0.2);
-  background: rgba(239, 68, 68, 0.03);
-}
+.muted { color: var(--text-3); }
+.small { font-size: .85rem; }
+.mono  { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
+.center { text-align: center; }
+.hidden { display: none !important; }
 
-/* Hero gradient background */
-.rit-hero-glow {
-  position: absolute;
-  width: 400px;
-  height: 400px;
-  border-radius: 50%;
-  background: radial-gradient(circle, var(--rit-accent-glow) 0%, transparent 70%);
-  filter: blur(80px);
-  pointer-events: none;
-  z-index: 0;
-}
+/* Any wide content (tables, code, pre) scrolls inside itself so the page body
+   never scrolls sideways. */
+.scroll-x { overflow-x: auto; -webkit-overflow-scrolling: touch; }
 
-/* Pipeline details */
-.rit-pipeline-detail {
-  padding: 0.75rem 1rem;
-  border-radius: var(--rit-radius-sm);
-  background: rgba(255, 255, 255, 0.02);
-  border: 1px solid rgba(255, 255, 255, 0.04);
-}
+/* htmx indicator convention */
+.htmx-indicator { display: none; }
+.htmx-request .htmx-indicator { display: inline-block; }
 
-[data-theme="light"] .rit-pipeline-detail {
-  background: rgba(0, 0, 0, 0.015);
-  border-color: rgba(0, 0, 0, 0.04);
-}
+/* ── 17. Motion preferences ──────────────────────────────────────────────── */
 
-/* ── 24. Save animation ───────────────────────────────────────────────────── */
-.save-success {
-  animation: savePulse 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
+@media (prefers-reduced-motion: reduce) {
+  *, *::before, *::after {
+    animation-duration: .01ms !important;
+    animation-iteration-count: 1 !important;
+    transition-duration: .01ms !important;
+    scroll-behavior: auto !important;
+  }
+  .card.is-leaving { animation: none; display: none; }
 }

app/templates/base.html

@@ -1,137 +1,121 @@
 <!DOCTYPE html>
-<html lang="en" data-theme="dark">
+{#
+  Base layout.
+
+  Loads NOTHING from an external origin. Previously this page pulled from four:
+  cdn.jsdelivr.net (DaisyUI), cdn.tailwindcss.com (Play CDN), unpkg.com (htmx)
+  and fonts.googleapis.com (via an @import inside styles.css, which serialised
+  the font request behind fetching and parsing that stylesheet).
+
+  The Play CDN in particular applies styles at runtime and its documented worst
+  case is "elements added to the page after first load" — i.e. every htmx-swapped
+  paper card on an infinite feed. See the note at the top of styles.css.
+#}
+<html lang="en">
 <head>
   <meta charset="UTF-8" />
   <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-  <meta name="description" content="ResearchIT — AI-powered arXiv paper recommendations. Search, save, and discover research tailored to your interests." />
+  <meta name="description" content="ResearchIT — a personal reading feed for arXiv. Papers picked for the things you actually work on." />
+  <meta name="color-scheme" content="light dark" />
   <title>{% block title %}ResearchIT{% endblock %}</title>
 
-  <!-- DaisyUI + TailwindCSS (CDN, no build step) -->
-  <link href="https://cdn.jsdelivr.net/npm/daisyui@4.12.10/dist/full.min.css" rel="stylesheet" />
-  <script src="https://cdn.tailwindcss.com"></script>
-
-  <!-- Custom styles -->
   <link rel="stylesheet" href="/static/styles.css" />
-  <link rel="stylesheet" href="/static/animations.css" />
 
-  <!-- HTMX -->
-  <script src="https://unpkg.com/htmx.org@1.9.12"></script>
-
-  <style>
-    /* HTMX indicator visibility */
-    .htmx-request .htmx-indicator { display: inline-block !important; }
-    .htmx-indicator { display: none; }
-  </style>
-
-  <!-- Theme restore (runs before body to prevent flash) -->
+  {#
+    Theme restore. Runs before first paint so an explicit choice never flashes.
+    Only an EXPLICIT choice is stamped — with nothing in localStorage the page
+    is left unstamped and follows the OS via prefers-color-scheme, which is the
+    correct default. The old build hardcoded data-theme="dark" on <html>, so a
+    light-mode user got a dark page regardless of their system setting.
+  #}
   <script>
-    (function() {
-      const saved = localStorage.getItem('researchit-theme');
-      if (saved) document.documentElement.setAttribute('data-theme', saved);
+    (function () {
+      try {
+        var t = localStorage.getItem('researchit-theme');
+        if (t === 'dark' || t === 'light') {
+          document.documentElement.setAttribute('data-theme', t);
+        }
+      } catch (e) { /* private mode — fall through to system preference */ }
     })();
   </script>
 
   {% block head %}{% endblock %}
 </head>
-<body class="bg-base-200 min-h-screen">
+<body>
+  {% set path = request.url.path if request else '/' %}
+
+  <a class="skip-link" href="#main">Skip to content</a>
 
-  <!-- ═══ Navbar ═══ -->
-  <nav class="rit-navbar navbar sticky top-0 z-50 px-4 md:px-6">
-    <div class="flex-1">
-      <a href="/" class="flex items-center gap-2 text-xl group">
-        <svg class="w-7 h-7 text-sky-400 group-hover:text-sky-300 transition-colors" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
-          <circle cx="11" cy="11" r="8"/><path d="m21 21-4.3-4.3"/>
-          <path d="M11 8v6M8 11h6" opacity="0.5"/>
-        </svg>
-        <span class="brand-text text-lg">ResearchIT</span>
-      </a>
-    </div>
+  <div class="shell">
 
-    <!-- Desktop Menu -->
-    <div class="hidden md:flex flex-none items-center gap-1">
-      <a href="/" class="rit-nav-link">Home</a>
-      <a href="/search" class="rit-nav-link">Search</a>
-      <a href="/saved" class="rit-nav-link">Saved</a>
-      <div class="w-px h-5 bg-base-content/10 mx-2"></div>
-      <button id="theme-toggle" class="btn btn-ghost btn-sm btn-circle" title="Toggle theme"
-              onclick="toggleTheme()">
-        <svg class="theme-icon-sun w-4 h-4 hidden" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="5"/><path d="M12 1v2M12 21v2M4.22 4.22l1.42 1.42M18.36 18.36l1.42 1.42M1 12h2M21 12h2M4.22 19.78l1.42-1.42M18.36 5.64l1.42-1.42"/></svg>
-        <svg class="theme-icon-moon w-4 h-4 hidden" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"/></svg>
-      </button>
-    </div>
+    <header class="topbar">
+      <div class="wrap">
+        <a href="/" class="brand">
+          <svg class="brand-mark" viewBox="0 0 24 24" fill="none" stroke="currentColor"
+               stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
+            <path d="M4 5.5A2.5 2.5 0 0 1 6.5 3H19v15H6.5A2.5 2.5 0 0 0 4 20.5z" />
+            <path d="M4 20.5A2.5 2.5 0 0 1 6.5 18H19v3H6.5A2.5 2.5 0 0 1 4 20.5z" />
+            <path d="M9 8h6M9 11.5h4" opacity=".55" />
+          </svg>
+          <span>ResearchIT</span>
+        </a>
 
-    <!-- Mobile Menu Toggle -->
-    <div class="flex-none md:hidden relative">
-      <label class="btn btn-ghost btn-sm btn-circle swap swap-rotate">
-        <input type="checkbox" class="mobile-menu-toggle hidden" />
-        <svg class="swap-off fill-current" xmlns="http://www.w3.org/2000/svg" width="22" height="22" viewBox="0 0 512 512"><path d="M64,384H448V341.33H64Zm0-106.67H448V234.67H64ZM64,128v42.67H448V128Z"/></svg>
-        <svg class="swap-on fill-current" xmlns="http://www.w3.org/2000/svg" width="22" height="22" viewBox="0 0 512 512"><polygon points="400 145.49 366.51 112 256 222.51 145.49 112 112 145.49 222.51 256 112 366.51 145.49 400 256 289.49 366.51 400 400 366.51 289.49 256 400 145.49"/></svg>
-      </label>
-      <div class="mobile-menu hidden">
-        <a href="/" class="btn btn-ghost btn-sm justify-start">Home</a>
-        <a href="/search" class="btn btn-ghost btn-sm justify-start">Search</a>
-        <a href="/saved" class="btn btn-ghost btn-sm justify-start">Saved</a>
-        <div class="divider my-1 opacity-20"></div>
-        <button class="btn btn-ghost btn-sm justify-start" onclick="toggleTheme()">
-          <span class="theme-text-dark hidden">Switch to Light ☀️</span>
-          <span class="theme-text-light hidden">Switch to Dark 🌙</span>
-        </button>
+        <nav class="nav" aria-label="Main">
+          <a href="/" class="nav-link" {% if path == '/' %}aria-current="page"{% endif %}>Feed</a>
+          <a href="/search" class="nav-link" {% if path.startswith('/search') %}aria-current="page"{% endif %}>Search</a>
+          <a href="/saved" class="nav-link" {% if path.startswith('/saved') %}aria-current="page"{% endif %}>Library</a>
+          <button type="button" class="icon-btn theme-toggle" onclick="toggleTheme()"
+                  aria-label="Switch between light and dark theme">
+            <svg class="i-sun" viewBox="0 0 24 24" fill="none" stroke="currentColor"
+                 stroke-width="1.8" stroke-linecap="round" aria-hidden="true">
+              <circle cx="12" cy="12" r="4.2" />
+              <path d="M12 2.5v2M12 19.5v2M4.2 4.2l1.4 1.4M18.4 18.4l1.4 1.4M2.5 12h2M19.5 12h2M4.2 19.8l1.4-1.4M18.4 5.6l1.4-1.4" />
+            </svg>
+            <svg class="i-moon" viewBox="0 0 24 24" fill="none" stroke="currentColor"
+                 stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
+              <path d="M20.5 13.4A8.5 8.5 0 1 1 10.6 3.5a6.7 6.7 0 0 0 9.9 9.9z" />
+            </svg>
+          </button>
+        </nav>
       </div>
-    </div>
-  </nav>
+    </header>
 
-  <!-- ═══ Main Content ═══ -->
-  <main class="container mx-auto px-4 py-6 md:py-10 max-w-4xl min-h-[70vh]">
-    {% block content %}{% endblock %}
-  </main>
+    <main id="main">
+      {% block content %}{% endblock %}
+    </main>
 
-  <!-- ═══ Footer ═══ -->
-  <footer class="app-footer">
-    <div class="container mx-auto px-4 max-w-4xl">
-      <p class="mb-2">
-        <span class="brand-text font-semibold">ResearchIT</span>
-        <span class="mx-2 opacity-30">·</span>
-        <span>Your personal research feed</span>
-      </p>
-      <div class="flex flex-wrap justify-center gap-2 mt-3">
-        <span class="footer-tech-badge">Qdrant</span>
-        <span class="footer-tech-badge">Zilliz</span>
-        <span class="footer-tech-badge">BGE-M3</span>
-        <span class="footer-tech-badge">LightGBM</span>
-        <span class="footer-tech-badge">Groq</span>
-        <span class="footer-tech-badge">Turso</span>
-      </div>
-    </div>
-  </footer>
+  </div>
 
-  <!-- ═══ Mobile Bottom Navigation ═══ -->
-  <div class="rit-bottom-nav">
-    <a href="/" class="rit-bottom-nav-item" data-page="home">
-      <svg fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.8">
-        <path stroke-linecap="round" stroke-linejoin="round" d="m3 12 2-2m0 0 7-7 7 7M5 10v10a1 1 0 0 0 1 1h3m10-11 2 2m-2-2v10a1 1 0 0 1-1 1h-3m-4 0a1 1 0 0 1-1-1v-4a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1v4a1 1 0 0 1-1 1h-2Z"/>
+  <nav class="botnav" aria-label="Main">
+    <a href="/" class="botnav-item" {% if path == '/' %}aria-current="page"{% endif %}>
+      <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7"
+           stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
+        <path d="M4 6.5A2.5 2.5 0 0 1 6.5 4H19v14H6.5A2.5 2.5 0 0 0 4 20.5z" />
+        <path d="M9 9h6" opacity=".55" />
       </svg>
-      <span>Home</span>
+      <span>Feed</span>
     </a>
-    <a href="/search" class="rit-bottom-nav-item" data-page="search">
-      <svg fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.8">
-        <path stroke-linecap="round" stroke-linejoin="round" d="m21 21-6-6m2-5a7 7 0 1 1-14 0 7 7 0 0 1 14 0Z"/>
+    <a href="/search" class="botnav-item" {% if path.startswith('/search') %}aria-current="page"{% endif %}>
+      <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7"
+           stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
+        <circle cx="11" cy="11" r="7" /><path d="m21 21-4.3-4.3" />
       </svg>
       <span>Search</span>
     </a>
-    <a href="/saved" class="rit-bottom-nav-item" data-page="saved">
-      <svg fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.8">
-        <path stroke-linecap="round" stroke-linejoin="round" d="M17.593 3.322c1.1.128 1.907 1.077 1.907 2.185V21L12 17.25 4.5 21V5.507c0-1.108.806-2.057 1.907-2.185a48.507 48.507 0 0 1 11.186 0Z"/>
+    <a href="/saved" class="botnav-item" {% if path.startswith('/saved') %}aria-current="page"{% endif %}>
+      <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7"
+           stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
+        <path d="M6 4h12a1 1 0 0 1 1 1v15l-7-3.6L5 20V5a1 1 0 0 1 1-1z" />
       </svg>
-      <span>Saved</span>
+      <span>Library</span>
     </a>
-  </div>
+  </nav>
 
-  <!-- ═══ Toast Container ═══ -->
-  <div id="toast-container"></div>
+  {# Undo toasts mount here. See app.js — dismissal is deferred, not confirmed. #}
+  <div class="toasts" id="toasts" role="status" aria-live="polite"></div>
 
-  <!-- ═══ Scripts ═══ -->
+  <script src="/static/htmx.min.js"></script>
   <script src="/static/app.js"></script>
   {% block scripts %}{% endblock %}
-
 </body>
 </html>

app/templates/index.html

@@ -1,98 +1,33 @@
 {% extends "base.html" %}
 
-{% block title %}ResearchIT — Your AI Research Feed{% endblock %}
+{% block title %}ResearchIT{% endblock %}
 
-{% block content %}
-<div class="space-y-10 fade-in">
-
-  <!-- ═══ Hero Section ═══ -->
-  <div class="py-8 md:py-14 text-center relative">
-    <!-- Decorative glow -->
-    <div class="rit-hero-glow animate-glow" style="top: -100px; left: 50%; transform: translateX(-50%);"></div>
+{#
+  Feed page.
 
-    <h1 class="text-3xl md:text-5xl font-extrabold mb-4 tracking-tight relative z-10 font-display">
-      <span class="brand-text">Your AI Research Feed</span>
-    </h1>
-    <p class="text-sm md:text-base text-base-content/50 mb-8 max-w-xl mx-auto leading-relaxed relative z-10">
-      Personalized paper recommendations powered by multi-interest clustering, BGE-M3 embeddings, and LightGBM reranking — across 1.6M arXiv papers.
-    </p>
+  The hero is gone. It previously ran py-8/py-14 with a brand headline, a
+  strapline naming the embedding model and reranker, a search box and three
+  vendor badges — so on a phone the first paper sat entirely below the fold.
+  A feed's job is to show the feed. Search has its own page and is one tap away
+  in both navs.
+#}
 
-    <!-- Search bar -->
-    <div class="max-w-2xl mx-auto relative z-10">
-      <div class="rit-search-wrapper">
-        <div class="card bg-base-100 shadow-lg rounded-xl">
-          <form action="/search" method="get" class="flex gap-2 p-2 items-center">
-            <svg class="w-5 h-5 ml-3 text-base-content/30 flex-shrink-0" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
-              <path stroke-linecap="round" stroke-linejoin="round" d="m21 21-6-6m2-5a7 7 0 1 1-14 0 7 7 0 0 1 14 0Z"/>
-            </svg>
-            <input type="text"
-                   name="q"
-                   placeholder="e.g. efficient transformers for edge devices…"
-                   class="rit-search-input text-base md:text-lg py-3"
-                   autofocus />
-            <button class="btn btn-primary btn-md rounded-lg px-5 flex-shrink-0" type="submit">
-              Search
-            </button>
-          </form>
-        </div>
-      </div>
-    </div>
-
-    <!-- Tech badges -->
-    <div class="flex flex-wrap justify-center gap-4 mt-6 text-xs text-base-content/40 relative z-10">
-      <span class="flex items-center gap-1.5">
-        <svg class="h-3.5 w-3.5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" /></svg>
-        Qdrant + Zilliz Vector Search
-      </span>
-      <span class="flex items-center gap-1.5">
-        <svg class="h-3.5 w-3.5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M13 10V3L4 14h7v7l9-11h-7z" /></svg>
-        Groq AI Summaries
-      </span>
-      <span class="flex items-center gap-1.5">
-        <svg class="h-3.5 w-3.5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M4.26 10.147a60.436 60.436 0 00-.491 6.347A48.627 48.627 0 0112 20.904a48.627 48.627 0 018.232-4.41 60.46 60.46 0 00-.491-6.347m-15.482 0a50.57 50.57 0 00-2.658-.813A59.905 59.905 0 0112 3.493a59.902 59.902 0 0110.399 5.84c-.896.248-1.783.52-2.658.814m-15.482 0A50.697 50.697 0 0112 13.489a50.702 50.702 0 017.74-3.342" /></svg>
-        LightGBM Reranker
-      </span>
-    </div>
-  </div>
-
-  <!-- ═══ Recommendations Section ═══ -->
-  <div>
-    <div class="flex items-center justify-between mb-4">
-      <h2 class="text-lg md:text-xl font-semibold font-display">Recommended for You</h2>
-      {% if save_count %}
-      <span class="stat-pill bg-primary/10 text-primary text-xs">
-        {{ save_count }} paper{{ "s" if save_count != 1 else "" }} saved
-      </span>
-      {% endif %}
-    </div>
-
-    <!-- Progress messages (above skeleton/content) -->
-    <div id="rec-progress-msgs" class="rit-progress-container"></div>
+{% block content %}
+<div class="wrap wrap--feed">
 
-    <div id="rec-section-wrapper" class="relative">
-      <div id="rec-section"
-           hx-get="/api/recommendations"
-           hx-trigger="load"
-           hx-swap="innerHTML">
-        <!-- Skeleton loaders while recommendations load -->
-        {% set count = 4 %}
-        {% include "partials/skeleton.html" %}
-      </div>
-    </div>
+  <div class="sec-head">
+    <h1 class="sec-title">Your feed</h1>
+    {% if save_count %}
+      <span class="pill">{{ save_count }} saved</span>
+    {% endif %}
   </div>
 
-  <!-- ═══ Coming Soon: Collaborative Filtering ═══ -->
-  <div class="coming-soon-section" onclick="handleComingSoon(event)">
-    <div class="flex items-center gap-3">
-      <span class="text-2xl opacity-50">👥</span>
-      <div>
-        <div class="flex items-center gap-2 mb-0.5">
-          <span class="text-sm font-medium text-base-content/50">Researchers like you also read…</span>
-          <span class="coming-soon-badge">🔒 Coming Soon</span>
-        </div>
-        <p class="text-xs text-base-content/30">Collaborative filtering recommendations based on similar research profiles.</p>
-      </div>
-    </div>
+  <div id="rec-section"
+       hx-get="/api/recommendations"
+       hx-trigger="load"
+       hx-swap="innerHTML">
+    {% set count = 4 %}
+    {% include "partials/skeleton.html" %}
   </div>
 
 </div>

app/templates/onboarding.html

@@ -1,187 +1,122 @@
 <!DOCTYPE html>
-<html lang="en" data-theme="dark">
+{#
+  Onboarding wizard. Standalone rather than extending base.html — the nav would
+  invite people out of a two-step flow — but it loads the same local stylesheet
+  and the same vendored htmx, so no external origins here either.
+#}
+<html lang="en">
 <head>
-  <meta charset="UTF-8">
-  <meta name="viewport" content="width=device-width, initial-scale=1.0">
-  <title>Welcome to ResearchIT</title>
-
-  <!-- DaisyUI + TailwindCSS (CDN) -->
-  <link href="https://cdn.jsdelivr.net/npm/daisyui@4.12.10/dist/full.min.css" rel="stylesheet" />
-  <script src="https://cdn.tailwindcss.com"></script>
-
-  <!-- Custom styles -->
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <meta name="color-scheme" content="light dark" />
+  <title>Welcome — ResearchIT</title>
   <link rel="stylesheet" href="/static/styles.css" />
-  <link rel="stylesheet" href="/static/animations.css" />
-
-  <!-- HTMX -->
-  <script src="https://unpkg.com/htmx.org@1.9.12"></script>
-  
-  <style>
-    /* HTMX indicator visibility */
-    .htmx-request .htmx-indicator { display: inline-block !important; }
-    .htmx-indicator { display: none; }
-  </style>
-
-  <!-- Theme restore -->
   <script>
-    (function() {
-      const saved = localStorage.getItem('researchit-theme');
-      if (saved) document.documentElement.setAttribute('data-theme', saved);
+    (function () {
+      try {
+        var t = localStorage.getItem('researchit-theme');
+        if (t === 'dark' || t === 'light') document.documentElement.setAttribute('data-theme', t);
+      } catch (e) {}
     })();
   </script>
 </head>
-<body class="bg-base-200 min-h-screen flex items-center justify-center p-4">
+<body>
+  <main class="wrap" style="max-width:46rem;padding-block:clamp(2rem,7vh,4.5rem) 8rem">
 
-  <!-- Step Indicator -->
-  <div class="fixed top-8 left-1/2 -translate-x-1/2 flex items-center gap-4 z-50">
-    <div id="dot-1" class="step-dot active"></div>
-    <div class="w-16 h-0.5 bg-base-content/10"></div>
-    <div id="dot-2" class="step-dot"></div>
-  </div>
+    <div id="step-1" class="ob-step">
+      <div class="ob-progress">
+        <span>Step 1 of 2</span>
+        <span class="ob-bar"><i style="width:50%"></i></span>
+      </div>
 
-  <main class="w-full max-w-4xl pb-16 fade-in">
-    
-    <!-- ═══ Step 1: Category Selection ═══ -->
-    <div id="step-1">
-      <div class="text-center mb-10 relative">
-        <div class="rit-hero-glow animate-glow" style="top: -50px; left: 50%; transform: translateX(-50%);"></div>
-        <h1 class="text-3xl md:text-5xl font-extrabold mb-4 font-display relative z-10">
-          <span class="brand-text">Build Your Research Feed</span>
-        </h1>
-        <p class="text-base-content/60 max-w-lg mx-auto relative z-10">
-          Select your research areas to get personalized recommendations. Choose at least 1 topic.
+      <div class="ob-head">
+        <span class="ob-kicker">Pick your areas</span>
+        <h1 class="ob-title">What do you work on?</h1>
+        <p class="ob-sub">
+          This filters what you get shown and is one of the signals behind
+          ranking. Pick anything that looks close — you are not locked in.
         </p>
       </div>
 
-      <div class="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 gap-3 mb-10 relative z-10">
+      <div class="cat-grid">
         {% for key, cat in categories.items() %}
-        <div class="category-tile {% if key in selected %}selected{% endif %} animate-card-in" 
-             style="animation-delay: {{ loop.index0 * 0.03 }}s"
-             data-key="{{ key }}" 
-             onclick="toggleCategory(this)">
-          
-          <div class="check-mark">✓</div>
-          <span class="tile-icon">{{ cat.icon }}</span>
-          <h3 class="tile-name">{{ cat.name }}</h3>
-          <p class="tile-desc">{{ cat.desc }}</p>
-        </div>
+          <button type="button" class="cat-opt" data-key="{{ key }}"
+                  aria-pressed="{{ 'true' if key in selected else 'false' }}"
+                  onclick="toggleCategory(this)">
+            <span class="name">{{ cat.name }}</span>
+            <span class="desc">{{ cat.desc }}</span>
+          </button>
         {% endfor %}
       </div>
+    </div>
 
-      <!-- Action Footer -->
-      <div class="fixed bottom-0 left-0 right-0 p-4 bg-base-200/95 backdrop-blur-md border-t border-base-content/10 z-50">
-        <div class="max-w-4xl mx-auto flex items-center justify-between">
-          <div class="text-sm font-medium">
-            <span id="selected-count" class="badge badge-primary mr-2">{{ selected|length }}</span>
-            <span class="text-base-content/60">selected (max 8)</span>
-          </div>
-          <div class="flex gap-3">
-            <button onclick="skipOnboarding()" class="btn btn-ghost btn-sm md:btn-md text-base-content/50">
-              Skip for now
-            </button>
-            <button id="continue-btn" onclick="submitCategories()" class="btn btn-primary btn-sm md:btn-md px-6 shadow-lg shadow-primary/20" {% if selected|length == 0 %}disabled{% endif %}>
-              Continue
-              <svg class="w-4 h-4 ml-1" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M9 5l7 7-7 7" /></svg>
-            </button>
-          </div>
+    <div id="step-2" class="hidden"></div>
+  </main>
+
+  <div class="ob-footer">
+    <div class="wrap" style="max-width:46rem">
+      <div class="row-between">
+        <span class="small muted"><span id="selected-count">{{ selected|length }}</span> selected · max 8</span>
+        <div class="row">
+          <button type="button" class="btn btn-ghost btn-sm" onclick="skipOnboarding()">Skip</button>
+          <button type="button" id="continue-btn" class="btn btn-primary btn-sm"
+                  onclick="submitCategories()" {% if selected|length == 0 %}disabled{% endif %}>Continue</button>
         </div>
       </div>
     </div>
+  </div>
 
-    <!-- ═══ Step 2: Seed Search ═══ -->
-    <div id="step-2" class="hidden">
-      <!-- Content loaded via HTMX from /api/onboarding/categories -->
-    </div>
-
-  </main>
+  <div class="toasts" id="toasts" role="status" aria-live="polite"></div>
 
+  <script src="/static/htmx.min.js"></script>
   <script src="/static/app.js"></script>
   <script>
-    // Initialize selected set from Jinja template
-    let selectedCategories = new Set({{ selected | tojson }});
+    var selectedCategories = new Set({{ selected | tojson }});
 
-    function toggleCategory(element) {
-      const key = element.dataset.key;
-      
+    function toggleCategory(el) {
+      var key = el.dataset.key;
       if (selectedCategories.has(key)) {
         selectedCategories.delete(key);
-        element.classList.remove('selected');
+        el.setAttribute('aria-pressed', 'false');
       } else {
-        if (selectedCategories.size >= 8) {
-          showToast('Maximum 8 categories allowed', 'error');
-          return;
-        }
+        if (selectedCategories.size >= 8) return;
         selectedCategories.add(key);
-        element.classList.add('selected');
-      }
-      updateUI();
-    }
-
-    function updateUI() {
-      const countEl = document.getElementById('selected-count');
-      const btn = document.getElementById('continue-btn');
-      
-      countEl.innerText = selectedCategories.size;
-      
-      if (selectedCategories.size > 0) {
-        btn.removeAttribute('disabled');
-        btn.classList.add('animate-pulse-once');
-      } else {
-        btn.setAttribute('disabled', 'true');
-        btn.classList.remove('animate-pulse-once');
+        el.setAttribute('aria-pressed', 'true');
       }
+      document.getElementById('selected-count').textContent = selectedCategories.size;
+      var btn = document.getElementById('continue-btn');
+      if (selectedCategories.size > 0) btn.removeAttribute('disabled');
+      else btn.setAttribute('disabled', 'true');
     }
 
     async function submitCategories() {
-      if (selectedCategories.size === 0) return;
-      
-      const btn = document.getElementById('continue-btn');
-      const originalText = btn.innerHTML;
-      btn.innerHTML = '<span class="loading loading-spinner loading-sm"></span> Saving...';
+      if (!selectedCategories.size) return;
+      var btn = document.getElementById('continue-btn');
       btn.setAttribute('disabled', 'true');
-
+      btn.textContent = 'Saving…';
       try {
-        const response = await fetch('/api/onboarding/categories', {
+        var res = await fetch('/api/onboarding/categories', {
           method: 'POST',
           headers: { 'Content-Type': 'application/json' },
           body: JSON.stringify({ categories: Array.from(selectedCategories) })
         });
-        
-        if (response.ok) {
-          const html = await response.text();
-          
-          // Hide step 1, show step 2
-          document.getElementById('step-1').classList.add('hidden');
-          const step2 = document.getElementById('step-2');
-          step2.innerHTML = html;
-          step2.classList.remove('hidden');
-          step2.classList.add('fade-in');
-          
-          // Update dots
-          document.getElementById('dot-1').classList.replace('active', 'completed');
-          document.getElementById('dot-2').classList.add('active');
-          
-          // Initialize HTMX on the newly injected HTML
-          htmx.process(step2);
-        } else {
-          showToast('Failed to save categories. Please try again.', 'error');
-          btn.innerHTML = originalText;
-          btn.removeAttribute('disabled');
-        }
+        if (!res.ok) throw new Error('bad status');
+        var html = await res.text();
+        document.getElementById('step-1').classList.add('hidden');
+        document.querySelector('.ob-footer').classList.add('hidden');
+        var s2 = document.getElementById('step-2');
+        s2.innerHTML = html;
+        s2.classList.remove('hidden');
+        htmx.process(s2);
       } catch (e) {
-        showToast('Network error. Please try again.', 'error');
-        btn.innerHTML = originalText;
         btn.removeAttribute('disabled');
+        btn.textContent = 'Continue';
       }
     }
 
     async function skipOnboarding() {
-      try {
-        await fetch('/api/onboarding/skip', { method: 'POST' });
-        window.location.href = '/';
-      } catch (e) {
-        window.location.href = '/';
-      }
+      try { await fetch('/api/onboarding/skip', { method: 'POST' }); } catch (e) {}
+      window.location.href = '/';
     }
   </script>
 </body>

app/templates/partials/action_buttons.html

@@ -1,65 +1,92 @@
 {#
   Action buttons for a paper card.
-  Expects: paper_id (or paper.arxiv_id), saved (bool), dismissed (bool)
-  Optional: source ("search" | "recommendation" | "saved"), position (int)
-  Phase 4.5: ranker_version, candidate_source, cluster_id (set by recommendations.py)
-  Phase 6.5: query_id (per-request UUID for feed-level CTR),
-             propensity (probability this paper was shown), policy_id
-  These are returned directly by the /api/papers/{id}/save endpoint
-  so they also work as a standalone partial.
+
+  Rendered two ways, and must work in both:
+    1. inline from paper_card.html, where `paper` is in scope
+    2. standalone as the response body of POST /api/papers/{id}/save, where
+       only paper_id / saved / source / candidate_source are passed
+
+  Save is htmx: non-destructive, immediately reversible via Remove, so it can
+  commit straight away.
+
+  Pass is NOT htmx. It defers the POST by a few seconds so Undo can cancel it
+  outright rather than compensating for it afterwards. That matters beyond UX:
+  a committed dismissal has already been folded into the negative EWMA profile,
+  and an EWMA is a lossy running average — there is no exact inverse. Deferring
+  keeps an undone dismissal out of the user's profile entirely. NN/g's guidance
+  for repetitive destructive actions is undo rather than confirmation, since a
+  confirm dialog taxes everyone who meant it.
 #}
 {% set pid = paper_id if paper_id is defined else paper.arxiv_id %}
 {% set is_saved = saved if saved is defined else (paper.saved | default(false)) %}
 {% set _source = source if source is defined else "search" %}
-{% set _ranker_version = paper.ranker_version | default("") if paper is defined else "" %}
-{% set _candidate_source = paper.candidate_source | default("") if paper is defined else "" %}
-{% set _cluster_id = paper.cluster_id | default("") if paper is defined else "" %}
-{% set _query_id = paper.query_id | default("") if paper is defined else "" %}
-{% set _position = paper.position | default(0) if paper is defined else 0 %}
-{% set _propensity = paper.propensity | default(0) if paper is defined else 0 %}
-{% set _policy_id = paper.policy_id | default("") if paper is defined else "" %}
+{% set _cand = candidate_source if candidate_source is defined
+               else (paper.candidate_source | default("") if paper is defined else "") %}
+
+{% if paper is defined %}
+  {% set _vals = {
+      "source": _source,
+      "position": paper.position | default(0),
+      "ranker_version": paper.ranker_version | default(""),
+      "candidate_source": paper.candidate_source | default(""),
+      "cluster_id": paper.cluster_id | default(""),
+      "query_id": paper.query_id | default(""),
+      "propensity": paper.propensity | default(0),
+      "policy_id": paper.policy_id | default("")
+  } %}
+{% else %}
+  {% set _vals = {
+      "source": _source,
+      "position": position | default(0),
+      "ranker_version": ranker_version | default(""),
+      "candidate_source": _cand,
+      "cluster_id": cluster_id | default(""),
+      "query_id": query_id | default(""),
+      "propensity": propensity | default(0),
+      "policy_id": policy_id | default("")
+  } %}
+{% endif %}
 
 {% if is_saved %}
-  <!-- Already saved — show saved state -->
-  <div class="flex items-center gap-2 flex-wrap">
-    <button class="rit-action-btn rit-btn-save saved save-success" disabled>
-      <span class="btn-icon">✓</span> Saved
-    </button>
-    <button class="rit-action-btn rit-btn-dismiss"
-            hx-post="/api/papers/{{ pid }}/not-interested"
-            hx-target="#paper-{{ pid }}"
-            hx-swap="outerHTML swap:200ms"
-            hx-vals='{"source": "{{ _source }}", "position": "{{ _position }}", "ranker_version": "{{ _ranker_version }}", "candidate_source": "{{ _candidate_source }}", "cluster_id": "{{ _cluster_id }}", "query_id": "{{ _query_id }}", "propensity": "{{ _propensity }}", "policy_id": "{{ _policy_id }}"}'>
-      <span class="btn-icon">✕</span> Remove
-    </button>
-  </div>
+  <button type="button" class="btn btn-sm btn-save" disabled aria-label="Saved to your library">
+    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2"
+         stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
+      <path d="m4.5 12.5 5 5 10-11" />
+    </svg>
+    Saved
+  </button>
+  <button type="button" class="btn btn-sm btn-pass"
+          data-dismiss
+          data-paper-id="{{ pid }}"
+          data-vals='{{ _vals | tojson }}'>Remove</button>
 {% else %}
-  <div class="flex items-center gap-2 flex-wrap">
-    <!-- Save -->
-    <button class="rit-action-btn rit-btn-save"
-            hx-post="/api/papers/{{ pid }}/save"
-            hx-target="[id='actions-{{ pid }}']"
-            hx-swap="innerHTML"
-            hx-vals='{"source": "{{ _source }}", "position": "{{ _position }}", "ranker_version": "{{ _ranker_version }}", "candidate_source": "{{ _candidate_source }}", "cluster_id": "{{ _cluster_id }}", "query_id": "{{ _query_id }}", "propensity": "{{ _propensity }}", "policy_id": "{{ _policy_id }}"}'>
-      <span class="btn-icon">⭐</span> Save
-    </button>
-    <!-- Not interested (removes the whole card) -->
-    <button class="rit-action-btn rit-btn-dismiss"
-            hx-post="/api/papers/{{ pid }}/not-interested"
-            hx-target="#paper-{{ pid }}"
-            hx-swap="outerHTML swap:200ms"
-            hx-vals='{"source": "{{ _source }}", "position": "{{ _position }}", "ranker_version": "{{ _ranker_version }}", "candidate_source": "{{ _candidate_source }}", "cluster_id": "{{ _cluster_id }}", "query_id": "{{ _query_id }}", "propensity": "{{ _propensity }}", "policy_id": "{{ _policy_id }}"}'>
-      <span class="btn-icon">✕</span> Not interested
-    </button>
-    <!-- Open on arXiv -->
-    <a href="https://arxiv.org/abs/{{ pid }}"
-       target="_blank"
-       rel="noopener"
-       class="rit-action-btn rit-btn-link">
-      <span class="btn-icon">
-        <svg xmlns="http://www.w3.org/2000/svg" class="h-3.5 w-3.5" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14" /></svg>
-      </span>
-      arXiv
-    </a>
-  </div>
+  {#
+    The target MUST be the attribute-selector form, not "#actions-{{ pid }}".
+    Every arXiv id contains a dot (1706.03762), and in a CSS selector that dot
+    starts a class token — so "#actions-1706.03762" parses as
+    id="actions-1706" AND class="03762", which matches nothing. A class token
+    also cannot begin with a digit, so querySelector raises a SyntaxError
+    rather than merely missing. [id='…'] compares the literal string.
+  #}
+  <button type="button" class="btn btn-sm btn-save"
+          hx-post="/api/papers/{{ pid }}/save"
+          hx-target="[id='actions-{{ pid }}']"
+          hx-swap="innerHTML"
+          hx-vals='{{ _vals | tojson }}'>
+    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.9"
+         stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
+      <path d="M6 4h12a1 1 0 0 1 1 1v15l-7-3.6L5 20V5a1 1 0 0 1 1-1z" />
+    </svg>
+    Save
+  </button>
+  <button type="button" class="btn btn-sm btn-pass"
+          data-dismiss
+          data-paper-id="{{ pid }}"
+          data-vals='{{ _vals | tojson }}'>Pass</button>
+{% endif %}
+
+{% if _cand | why_shown %}
+  <button type="button" class="btn btn-sm btn-ghost card-why"
+          aria-expanded="false" aria-controls="why-{{ pid }}"
+          onclick="toggleWhy(this, '{{ pid }}')">Why this?</button>
 {% endif %}

app/templates/partials/ai_summary.html

@@ -1,17 +1,7 @@
-{# Partial: AI Summary Card #}
+{# AI overview of the top search results. #}
 {% if summary_html %}
-<div class="ai-summary-card mb-6 fade-in">
-  <div class="flex items-center gap-2 mb-3">
-    <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-primary" viewBox="0 0 24 24" fill="currentColor">
-      <path d="M12 2L9.19 8.63L2 9.24l5.46 4.73L5.82 21L12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2z" />
-    </svg>
-    <span class="font-semibold text-sm brand-text-sm">AI Overview</span>
-  </div>
-  <div class="text-sm text-base-content/90 leading-relaxed">
-    {{ summary_html | safe }}
-  </div>
-  <div class="mt-3 flex justify-end">
-    <span class="text-[10px] text-base-content/40 uppercase tracking-wider">Powered by Groq</span>
-  </div>
+<div class="ai-summary">
+  <span class="label">Overview</span>
+  <div>{{ summary_html | safe }}</div>
 </div>
 {% endif %}

app/templates/partials/empty_recs.html

@@ -1,25 +1,16 @@
-{# Shown when the user hasn't saved enough papers yet #}
-<div class="text-center py-12 space-y-4 max-w-md mx-auto">
-  <div class="text-5xl mb-2 opacity-70">🔬</div>
-  <h3 class="text-lg font-semibold font-display">Your personal feed is brewing</h3>
-  <p class="text-sm text-base-content/50 leading-relaxed">
-    Save {{ min_saves | default(1) }} or more paper{{ "s" if (min_saves | default(1)) > 1 else "" }}
-    while searching to unlock personalized recommendations powered by your unique research interests.
+{# Shown when there is nothing to recommend yet. #}
+<div class="empty">
+  <p class="empty-title">Nothing here yet</p>
+  <p class="empty-body">
+    Save {{ min_saves | default(1) }} paper{{ "s" if (min_saves | default(1)) > 1 else "" }} and
+    this feed starts building itself around what you read. It gets noticeably
+    better at five.
   </p>
-
-  <div class="flex flex-col items-center gap-3 pt-2">
-    <a href="/search" class="btn btn-primary btn-sm shadow-lg shadow-primary/10">
-      <svg class="w-4 h-4 mr-1" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
-        <path stroke-linecap="round" stroke-linejoin="round" d="m21 21-6-6m2-5a7 7 0 1 1-14 0 7 7 0 0 1 14 0Z"/>
-      </svg>
-      Start Searching
-    </a>
-
-    <button class="btn btn-ghost btn-xs text-base-content/40"
+  <div class="row" style="justify-content:center;padding-top:.4rem">
+    <a href="/search" class="btn btn-primary btn-sm">Find papers</a>
+    <button type="button" class="btn btn-quiet btn-sm"
             hx-get="/api/recommendations"
             hx-target="#rec-section"
-            hx-swap="innerHTML">
-      ↻ Check for recommendations
-    </button>
+            hx-swap="innerHTML">Check again</button>
   </div>
 </div>

app/templates/partials/paper_card.html

@@ -1,100 +1,76 @@
 {#
-  Reusable paper card.
-  Expects variables:
-    paper  – dict with arxiv_id, title, abstract, authors (JSON str), category, published, year
-    source – "search" | "recommendation"  (default "search")
-    position – integer rank in the list
+  Paper card.
+
+  Expects:
+    paper     dict — arxiv_id, title, abstract, authors (JSON str), category,
+                     published, year, citation_count, saved, plus the Phase 4.5 /
+                     6.5 instrumentation keys (ranker_version, candidate_source,
+                     cluster_id, query_id, position, propensity, policy_id)
+    source    "search" | "recommendation" | "saved"   (default "search")
+    position  int — GLOBAL rank in the feed, not the index within a page
+
+  Anatomy, top to bottom: meta line / title / authors / abstract / actions.
+  The previous card gave five facts five competing treatments — a coloured
+  badge pulled to the right of the title, a year pill, a mono arXiv id, the
+  author list and a citation count with its own icon — none of which anyone
+  scans for, all of which outweighed the title.
 #}
 {% set source = source | default("search") %}
-{% set position = position | default(0) %}
-{% set authors_list = paper.authors | default("[]") | tojson_parse | default([]) %}
-
-{# Fallback: if tojson_parse returned empty but authors is a non-empty string, split by comma #}
+{% set position = position if position is defined else (paper.position | default(0)) %}
+{% set authors_list = paper.authors | default("[]") | tojson_parse %}
 {% if not authors_list and paper.authors %}
   {% set authors_list = paper.authors.split(", ") %}
 {% endif %}
+{% set lead = paper.abstract | lead %}
+{% set rest = paper.abstract | lead_rest %}
+{% set cites = paper.citation_count | default(0) %}
+{% set pub_year = (paper.year | string) if paper.year else (paper.published[:4] if paper.published else "") %}
 
-{# Category badge colour mapping #}
-{% set cat = paper.category | default("") %}
-{% if cat.startswith("cs.") %}
-  {% set cat_class = "cat-cs" %}
-{% elif cat.startswith("hep") or cat.startswith("physics") or cat.startswith("astro") or cat.startswith("quant") or cat.startswith("cond-mat") %}
-  {% set cat_class = "cat-phys" %}
-{% elif cat.startswith("math") or cat.startswith("stat") %}
-  {% set cat_class = "cat-math" %}
-{% elif cat.startswith("q-bio") %}
-  {% set cat_class = "cat-bio" %}
-{% elif cat.startswith("econ") %}
-  {% set cat_class = "cat-econ" %}
-{% elif cat.startswith("eess") %}
-  {% set cat_class = "cat-eess" %}
-{% else %}
-  {% set cat_class = "cat-other" %}
-{% endif %}
-
-<div class="paper-card bg-base-100 p-4 md:p-5 space-y-2.5 animate-card-in"
-     id="paper-{{ paper.arxiv_id }}"
-     data-cat="{{ cat }}">
+<article class="card" id="paper-{{ paper.arxiv_id }}" data-arxiv-id="{{ paper.arxiv_id }}">
 
-  <!-- Title + category badge -->
-  <div class="flex items-start justify-between gap-3">
-    <a href="https://arxiv.org/abs/{{ paper.arxiv_id }}"
-       target="_blank"
-       rel="noopener"
-       class="paper-title leading-snug flex-1">
-      {{ paper.title }}
-    </a>
+  <div class="card-meta">
     {% if paper.category %}
-    <span class="cat-badge {{ cat_class }} shrink-0 mt-0.5">{{ paper.category }}</span>
+      <span class="cat {{ paper.category | cat_class }}">{{ paper.category }}</span>
     {% endif %}
-  </div>
-
-  <!-- Meta: year pill · arXiv ID · authors · citations -->
-  <div class="flex flex-wrap items-center gap-2">
-    {% set p_year = (paper.year | string) if paper.year else (paper.published[:4] if paper.published else "") %}
-    {% if p_year %}
-      <span class="year-pill {% if p_year in ['2024', '2025', '2026'] %}recent{% endif %}">{{ p_year }}</span>
+    {% if pub_year %}<span>{{ pub_year }}</span>{% endif %}
+    {% if cites %}
+      <span class="sep">·</span>
+      <span>{{ cites | commafy }} citations</span>
     {% endif %}
+  </div>
 
-    <span class="text-xs text-base-content/40 font-mono font-medium">[{{ paper.arxiv_id }}]</span>
+  <a class="card-title"
+     href="https://arxiv.org/abs/{{ paper.arxiv_id }}"
+     target="_blank" rel="noopener">{{ paper.title }}</a>
 
-    {% if authors_list %}
-      <span class="text-xs text-base-content/60">·</span>
-      <span class="text-xs text-base-content/70">
-        {{ authors_list[:3] | join(", ") }}
-        {% if authors_list | length > 3 %}
-          <span class="opacity-60 italic">+{{ authors_list | length - 3 }} more</span>
-        {% endif %}
-      </span>
-    {% endif %}
+  {% if authors_list %}
+    <div class="card-authors">
+      {{ authors_list[:3] | join(", ") }}{% if authors_list | length > 3 %} &amp; {{ authors_list | length - 3 }} more{% endif %}
+    </div>
+  {% endif %}
 
-    {% if paper.citation_count %}
-      <span class="text-xs text-base-content/60 hidden sm:inline">·</span>
-      <span class="cite-count" title="{{ paper.influential_citations|default(0) }} influential">
-        <svg xmlns="http://www.w3.org/2000/svg" class="h-3.5 w-3.5" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13.828 10.172a4 4 0 00-5.656 0l-4 4a4 4 0 105.656 5.656l1.102-1.101m-.758-4.899a4 4 0 005.656 0l4-4a4 4 0 00-5.656-5.656l-1.1 1.1" /></svg>
-        {{ paper.citation_count }} citations
-      </span>
+  {% if lead or rest %}
+    <p class="card-abstract{% if rest %} is-clamped{% endif %}" id="abs-{{ paper.arxiv_id }}">
+      {%- if lead %}<span class="lead">{{ lead }}</span>{% endif -%}
+      {%- if rest %} <span class="rest">{{ rest }}</span>{% endif -%}
+    </p>
+    {% if rest %}
+      <button type="button" class="card-more"
+              aria-expanded="false" aria-controls="abs-{{ paper.arxiv_id }}"
+              onclick="toggleAbstract(this)">Read more</button>
     {% endif %}
-  </div>
-
-  <!-- Abstract (expandable) -->
-  <p class="abstract-text text-sm text-base-content/75">
-    {{ paper.abstract[:500] }}{% if paper.abstract | length > 500 %}…{% endif %}
-  </p>
-  <button class="abstract-toggle" onclick="toggleAbstract(this)">↓ Show more</button>
+  {% endif %}
 
-  <!-- Action buttons (HTMX-powered, swap themselves on click) -->
-  <div id="actions-{{ paper.arxiv_id }}">
+  <div class="card-actions" id="actions-{{ paper.arxiv_id }}">
     {% include "partials/action_buttons.html" %}
   </div>
 
-  <!-- Why this paper? — Coming Soon -->
-  <div class="coming-soon-wrapper interactive" onclick="handleComingSoon(event)">
-    <div class="flex items-center gap-2 pt-1 cursor-pointer">
-      <svg xmlns="http://www.w3.org/2000/svg" class="h-3.5 w-3.5 text-base-content/40" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z" /></svg>
-      <span class="text-xs text-base-content/50">Why this paper?</span>
-      <span class="coming-soon-badge">Coming Soon</span>
-    </div>
-  </div>
 
-</div>
+  {# Reason panel lives outside #actions-… so it survives the htmx swap that
+     replaces the buttons after a save. #}
+  {% set reason = paper.candidate_source | default("") | why_shown %}
+  {% if reason %}
+    <p class="card-reason hidden" id="why-{{ paper.arxiv_id }}">{{ reason }}</p>
+  {% endif %}
+
+</article>

app/templates/partials/rec_page.html

@@ -0,0 +1,55 @@
+{#
+  One appendable page of the feed: cards, then the loader for the page after it.
+
+  Swapped in via hx-swap="outerHTML" onto the previous loader button, so this
+  fragment replaces the button that requested it and brings its own successor.
+  That makes the chain self-perpetuating with no JavaScript, exactly as the
+  htmx infinite-scroll example prescribes.
+
+  The loader is a real <button>, not a bare sentinel div, and carries
+  hx-trigger="revealed, click". NN/g's infinite-scroll findings are that
+  screen-reader users "will only see the first chunk of the list, without being
+  able to trigger the loading of new content", and that an endless list also
+  destroys footer access and any sense of whether more content exists. One
+  focusable, clickable element that also auto-fires on scroll answers all three.
+
+  The button carries ONLY hx-trigger="click"; the scroll-to-load behaviour is
+  driven by an IntersectionObserver in app.js that clicks it. That split is
+  deliberate, and both of htmx's built-in options were tried against the live
+  deployment first:
+
+    * `revealed` — htmx's poller collects elements with an exact attribute
+      match, querySelectorAll("[hx-trigger='revealed'],…"). This element also
+      needs a click trigger, so its attribute reads "revealed, click", which
+      that selector never matches. Verified dead: scrolled with the loader in
+      view (rect.top 745 < clientHeight 861), data-hx-revealed stayed null and
+      no request was made.
+    * `intersect once, click` — the handler wires up correctly (dispatching a
+      synthetic `intersect` did load the next page) but the observer never
+      fired on real scrolling in the deployed build.
+
+  Owning the observer removes the dependency on those internals entirely, and
+  keeps one real <button> serving both paths: pointer users and scrollers get
+  it automatically, keyboard and screen-reader users can focus and activate it.
+  NN/g's infinite-scroll finding is that screen-reader users otherwise "only
+  see the first chunk of the list, without being able to trigger the loading of
+  new content".
+#}
+{% for paper in papers %}
+  {% set source = "recommendation" %}
+  {% set position = paper.position %}
+  {% include "partials/paper_card.html" %}
+{% endfor %}
+
+{% if has_more %}
+  <button type="button" class="feed-more"
+          hx-get="/api/recommendations?page={{ next_page }}&amp;query_id={{ query_id }}"
+          hx-trigger="click"
+          hx-target="this"
+          hx-swap="outerHTML transition:true">
+    <span class="spinner" aria-hidden="true"></span>
+    <span class="label">More papers</span>
+  </button>
+{% else %}
+  <p class="feed-end">That's everything for now — save a few papers and the feed will refill.</p>
+{% endif %}

app/templates/partials/recommendations.html

@@ -1,72 +1,25 @@
-{# Partial: personalised recommendations #}
+{#
+  First page of the feed. Wraps the shared page fragment in the .feed column
+  so subsequent pages can append into the same flex container.
+
+  Gone from here: the "How we found these" panel that reported Ward Clustering
+  / ANN Retrieval / MMR timings in milliseconds. That is instrumentation for
+  the person who built the pipeline, not an answer to anything a reader wants
+  to know — per-paper "Why this?" replaces it. Timings still travel in the
+  response for anyone profiling; they are just no longer rendered.
+#}
 {% if papers %}
   {% if trending %}
-  <div class="flex items-center gap-2 mb-4">
-    <span class="stat-pill bg-warning/10 text-warning text-xs">🔥 Trending in your areas</span>
-    <span class="text-xs text-base-content/35">Save papers to get personalised recommendations</span>
-  </div>
-  {% endif %}
-
-  <div class="space-y-4">
-    {% for paper in papers %}
-      {% set position = loop.index0 %}
-      {% set source = "recommendation" %}
-      {% include "partials/paper_card.html" %}
-    {% endfor %}
-  </div>
-
-  {# Pipeline timing breakdown #}
-  {% if timing is defined and timing %}
-  <details class="mt-5 group">
-    <summary class="text-xs font-semibold text-base-content/40 cursor-pointer list-none flex items-center gap-1.5 w-fit hover:text-base-content/60 transition-colors">
-      <svg class="h-3 w-3 transition-transform group-open:rotate-90" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M9 5l7 7-7 7" /></svg>
-      ⚡ How we found these
-      {% if timing.clustering_ms is defined %}
-        <span class="font-normal opacity-50">(pipeline)</span>
-      {% endif %}
-    </summary>
-    <div class="rit-pipeline-detail mt-2">
-      <div class="flex flex-wrap gap-x-4 gap-y-1.5 text-xs font-mono text-base-content/50">
-        {% if timing.clustering_ms is defined %}
-          <span>Ward Clustering: <span class="text-primary">{{ timing.clustering_ms }}ms</span></span>
-        {% endif %}
-        {% if timing.ann_retrieval_ms is defined %}
-          <span>ANN Retrieval: <span class="text-primary">{{ timing.ann_retrieval_ms }}ms</span></span>
-        {% endif %}
-        {% if timing.candidate_meta_ms is defined %}
-          <span>Candidate Meta: <span class="text-primary">{{ timing.candidate_meta_ms }}ms</span></span>
-        {% endif %}
-        {% if rerank_time_ms is defined %}
-          <span>LightGBM Rerank: <span class="text-primary">{{ rerank_time_ms }}ms</span></span>
-        {% endif %}
-        {% if timing.mmr_ms is defined %}
-          <span>MMR Diversity: <span class="text-primary">{{ timing.mmr_ms }}ms</span></span>
-        {% endif %}
-        {% if meta_time_ms is defined %}
-          <span>Final Metadata: <span class="text-primary">{{ meta_time_ms }}ms</span></span>
-        {% endif %}
-      </div>
+    <div class="notice" style="margin-bottom:.85rem">
+      <span>
+        Popular in the areas you picked. Save a few papers and the feed starts
+        following your own reading instead.
+      </span>
     </div>
-  </details>
-  {% elif rerank_time_ms is defined and meta_time_ms is defined %}
-  <div class="text-center pt-3 text-xs text-base-content/30 font-mono">
-    ⚡ Reranking: {{ rerank_time_ms }}ms · Metadata: {{ meta_time_ms }}ms
-  </div>
   {% endif %}
 
-  <!-- Refresh button -->
-  <div class="text-center pt-4">
-    <button class="btn btn-ghost btn-sm text-base-content/50 hover:text-base-content/80"
-            hx-get="/api/recommendations"
-            hx-target="#rec-section"
-            hx-swap="innerHTML"
-            hx-indicator="#rec-refresh-spinner">
-      <svg class="w-4 h-4 mr-1" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
-        <path stroke-linecap="round" stroke-linejoin="round" d="M16.023 9.348h4.992v-.001M2.985 19.644v-4.992m0 0h4.992m-4.993 0l3.181 3.183a8.25 8.25 0 0013.803-3.7M4.031 9.865a8.25 8.25 0 0113.803-3.7l3.181 3.182m0-4.991v4.99"/>
-      </svg>
-      Show different recommendations
-      <span id="rec-refresh-spinner" class="htmx-indicator loading loading-spinner loading-xs ml-1"></span>
-    </button>
+  <div class="feed" id="feed">
+    {% include "partials/rec_page.html" %}
   </div>
 {% else %}
   {% include "partials/empty_recs.html" %}

app/templates/partials/search_results.html

@@ -1,46 +1,35 @@
-{# Partial: list of search result cards #}
+{# Search result list. #}
 {% if papers %}
-  <div class="space-y-4">
-    <!-- Results header -->
-    <div class="flex flex-wrap items-center gap-2 text-sm text-base-content/60">
-      <span class="stat-pill">{{ papers | length }} results</span>
-      <span>for "<span class="font-medium text-base-content">{{ query }}</span>"</span>
+  <div class="stack stack-4">
+
+    <div class="search-meta">
+      <span>{{ papers | length }} result{{ "s" if papers | length != 1 else "" }} for &ldquo;{{ query }}&rdquo;</span>
       {% if search_meta and search_meta.total_time_ms is defined %}
-        <span class="text-xs opacity-50">({{ search_meta.total_time_ms }}ms)</span>
+        <span>{{ search_meta.total_time_ms }}ms</span>
       {% endif %}
       {% if search_meta and search_meta.rewritten_query %}
-        <span class="text-xs opacity-70">
-          — Expanded to: <span class="italic">"{{ search_meta.rewritten_query }}"</span>
-        </span>
+        <span>searched as &ldquo;{{ search_meta.rewritten_query }}&rdquo;</span>
       {% endif %}
     </div>
 
-    {# AI Summary Slot #}
     {% if query and papers %}
-    {% set arxiv_ids = papers | map(attribute='arxiv_id') | join(',') %}
-    <div id="ai-summary-container"
-         hx-get="/api/search/summary?q={{ query | urlencode }}&ids={{ arxiv_ids }}"
-         hx-trigger="load"
-         hx-swap="innerHTML">
-      <!-- Skeleton loader for AI summary -->
-      <div class="ai-summary-card">
-        <div class="flex items-center gap-2 mb-2">
-          <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-primary" viewBox="0 0 20 20" fill="currentColor">
-            <path fill-rule="evenodd" d="M11.3 1.046A1 1 0 0112 2v5h4a1 1 0 01.82 1.573l-7 10A1 1 0 018 18v-5H4a1 1 0 01-.82-1.573l7-10a1 1 0 011.12-.38z" clip-rule="evenodd" />
-          </svg>
-          <span class="font-semibold text-sm brand-text">AI Overview</span>
-        </div>
-        <div class="space-y-2 animate-pulse opacity-60">
-          <div class="h-3 bg-base-content/20 rounded w-full"></div>
-          <div class="h-3 bg-base-content/20 rounded w-5/6"></div>
-          <div class="h-3 bg-base-content/20 rounded w-4/6"></div>
+      {% set arxiv_ids = papers | map(attribute='arxiv_id') | join(',') %}
+      <div id="ai-summary-container"
+           hx-get="/api/search/summary?q={{ query | urlencode }}&amp;ids={{ arxiv_ids }}"
+           hx-trigger="load"
+           hx-swap="innerHTML">
+        <div class="ai-summary">
+          <span class="label">Overview</span>
+          <div class="stack stack-2" aria-hidden="true">
+            <div class="skel" style="width:100%"></div>
+            <div class="skel" style="width:88%"></div>
+            <div class="skel" style="width:64%"></div>
+          </div>
         </div>
       </div>
-    </div>
     {% endif %}
 
-    <!-- Paper cards -->
-    <div class="space-y-4">
+    <div class="feed">
       {% for paper in papers %}
         {% set position = loop.index0 %}
         {% set source = "search" %}
@@ -49,64 +38,38 @@
     </div>
   </div>
 
-  {# Pipeline timing breakdown #}
+  {#
+    Stage timings stay, but collapsed and quiet. They are genuinely useful to a
+    single developer profiling a multi-second pipeline; they are just not the
+    page's content. Note groq_time_ms OVERLAPS encode_time_ms — the stages run
+    concurrently, so these do not sum to the total.
+  #}
   {% if search_meta %}
-  <details class="mt-6 group">
-    <summary class="rit-pipeline-detail text-xs font-semibold text-base-content/50 cursor-pointer list-none flex items-center gap-1 w-fit">
-      <svg xmlns="http://www.w3.org/2000/svg" class="h-3 w-3 transition-transform group-open:rotate-90" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" /></svg>
-      Search Pipeline Details
-      {% if search_meta.total_time_ms is defined %}
-        <span class="font-normal opacity-70">({{ search_meta.total_time_ms }}ms)</span>
-      {% endif %}
-    </summary>
-    <div class="mt-2 p-3 rounded-lg bg-base-200/50 border border-base-300/30">
-      <div class="flex flex-wrap gap-x-4 gap-y-1 text-xs font-mono text-base-content/60">
+    <details class="stack" style="margin-top:1.25rem">
+      <summary class="small muted" style="cursor:pointer">Pipeline timings</summary>
+      <div class="search-meta" style="margin-top:.5rem">
         {% if search_meta.groq_time_ms is defined %}
-          <span>Groq Rewrite: <span class="text-primary">{{ search_meta.groq_time_ms }}ms</span>
-            {% if search_meta.groq_status is defined and search_meta.groq_status != 'rewritten' %}
-              <span class="text-warning/60">({{ search_meta.groq_status }})</span>
-            {% endif %}
-          </span>
-        {% endif %}
-        {% if search_meta.encode_time_ms is defined %}
-          <span>BGE-M3 Encode: <span class="text-primary">{{ search_meta.encode_time_ms }}ms</span></span>
-        {% endif %}
-        {% if search_meta.retrieval_time_ms is defined %}
-          <span>Qdrant+Zilliz: <span class="text-primary">{{ search_meta.retrieval_time_ms }}ms</span>
-            {% if search_meta.n_retrieval_tasks is defined %}
-              <span class="text-base-content/30">({{ search_meta.n_retrieval_tasks }} parallel tasks)</span>
-            {% endif %}
-          </span>
-        {% endif %}
-        {% if search_meta.rrf_time_ms is defined %}
-          <span>RRF Fusion: <span class="text-primary">{{ search_meta.rrf_time_ms }}ms</span></span>
-        {% endif %}
-        {% if search_meta.bge_rerank_time_ms is defined %}
-          <span>BGE Rerank: <span class="text-primary">{{ search_meta.bge_rerank_time_ms }}ms</span></span>
+          <span>rewrite {{ search_meta.groq_time_ms }}ms{% if search_meta.groq_status is defined and search_meta.groq_status != 'rewritten' %} ({{ search_meta.groq_status }}){% endif %}</span>
         {% endif %}
+        {% if search_meta.encode_time_ms is defined %}<span>encode {{ search_meta.encode_time_ms }}ms</span>{% endif %}
+        {% if search_meta.retrieval_time_ms is defined %}<span>retrieval {{ search_meta.retrieval_time_ms }}ms{% if search_meta.n_retrieval_tasks is defined %} ({{ search_meta.n_retrieval_tasks }} tasks){% endif %}</span>{% endif %}
+        {% if search_meta.rrf_time_ms is defined %}<span>rrf {{ search_meta.rrf_time_ms }}ms</span>{% endif %}
+        {% if search_meta.bge_rerank_time_ms is defined %}<span>cross-encoder {{ search_meta.bge_rerank_time_ms }}ms</span>{% endif %}
         {% if search_meta.turso_boost_fetch_ms is defined %}
-          <span>Turso Title Fetch: <span class="text-primary">{{ search_meta.turso_boost_fetch_ms }}ms</span></span>
-          <span>Rerank Compute: <span class="text-primary">{{ search_meta.rerank_compute_ms }}ms</span></span>
+          <span>title fetch {{ search_meta.turso_boost_fetch_ms }}ms</span>
+          <span>boost {{ search_meta.rerank_compute_ms }}ms</span>
         {% elif search_meta.rerank_time_ms is defined %}
-          <span>Title+Citation Rerank: <span class="text-primary">{{ search_meta.rerank_time_ms }}ms</span></span>
-        {% endif %}
-        {% if search_meta.meta_time_ms is defined %}
-          <span>Final Metadata: <span class="text-primary">{{ search_meta.meta_time_ms }}ms</span></span>
+          <span>boost {{ search_meta.rerank_time_ms }}ms</span>
         {% endif %}
+        {% if search_meta.meta_time_ms is defined %}<span>metadata {{ search_meta.meta_time_ms }}ms</span>{% endif %}
+        {% if search_meta.groq_overlapped %}<span class="muted">(rewrite overlaps encode — stages do not sum)</span>{% endif %}
       </div>
-    </div>
-  </details>
+    </details>
   {% endif %}
 
 {% elif query %}
-  <div class="rit-error-state text-center py-16">
-    <svg xmlns="http://www.w3.org/2000/svg" class="h-12 w-12 mx-auto mb-4 text-base-content/20" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" />
-    </svg>
-    <p class="text-lg font-medium text-base-content/50 mb-1">No papers found for "{{ query }}"</p>
-    <p class="text-sm text-base-content/40">Try a broader search or different keywords.</p>
-    {% if search_meta and search_meta.total_time_ms is defined %}
-      <p class="text-xs text-base-content/30 mt-3">Search completed in {{ search_meta.total_time_ms }}ms</p>
-    {% endif %}
+  <div class="empty">
+    <p class="empty-title">No papers for &ldquo;{{ query }}&rdquo;</p>
+    <p class="empty-body">Try broader wording, or the name of a method or model.</p>
   </div>
 {% endif %}

app/templates/partials/seed_results.html

@@ -1,53 +1,35 @@
+{# Compact seed-picker rows. Denser than a feed card — this is a pick list. #}
 {% if papers is defined and papers %}
-  <div class="space-y-3 max-w-xl mx-auto pb-16">
+  <div class="stack stack-2">
     {% for paper in papers %}
-    <div class="seed-card flex items-start gap-4 animate-card-in" style="animation-delay: {{ loop.index0 * 0.05 }}s" id="seed-paper-{{ paper.arxiv_id }}">
-      
-      <div class="flex-1 min-w-0">
-        <a href="https://arxiv.org/abs/{{ paper.arxiv_id }}" target="_blank" class="paper-title block text-sm mb-1 line-clamp-1">
-          {{ paper.title }}
-        </a>
-        <div class="flex items-center gap-2 flex-wrap">
-          <span class="font-mono text-[10px] opacity-50">{{ paper.arxiv_id }}</span>
-          
-          {# Format category badge #}
-          {% set cat_class = "cat-other" %}
-          {% if paper.category.startswith("cs.") %} {% set cat_class = "cat-cs" %}
-          {% elif paper.category.startswith("physics.") or paper.category.startswith("hep-") or paper.category.startswith("astro-") or paper.category.startswith("quant-ph") %} {% set cat_class = "cat-phys" %}
-          {% elif paper.category.startswith("math.") or paper.category.startswith("stat.") %} {% set cat_class = "cat-math" %}
-          {% elif paper.category.startswith("q-bio.") %} {% set cat_class = "cat-bio" %}
-          {% elif paper.category.startswith("econ.") %} {% set cat_class = "cat-econ" %}
-          {% elif paper.category.startswith("eess.") %} {% set cat_class = "cat-eess" %}
-          {% endif %}
-          <span class="cat-badge {{ cat_class }} text-[9px] px-1.5 py-0.5">{{ paper.category.split('.')[0] | upper }}</span>
-          
-          {% if paper.citation_count is defined and paper.citation_count > 0 %}
-          <span class="cite-count text-[10px]">
-            <svg class="w-2.5 h-2.5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M7 8h10M7 12h4m1 8l-4-4H5a2 2 0 01-2-2V6a2 2 0 012-2h14a2 2 0 012 2v8a2 2 0 01-2 2h-3l-4 4z" /></svg>
-            {{ paper.citation_count }}
-          </span>
-          {% endif %}
+      <div class="seed-row" id="seed-paper-{{ paper.arxiv_id }}">
+        <div class="grow">
+          <a class="seed-title" href="https://arxiv.org/abs/{{ paper.arxiv_id }}"
+             target="_blank" rel="noopener">{{ paper.title }}</a>
+          <div class="card-meta" style="margin-top:.2rem">
+            {% if paper.category %}
+              <span class="cat {{ paper.category | cat_class }}">{{ paper.category }}</span>
+            {% endif %}
+            {% if paper.year %}<span>{{ paper.year }}</span>{% endif %}
+            {% if paper.citation_count %}
+              <span class="sep">·</span><span>{{ paper.citation_count | commafy }} citations</span>
+            {% endif %}
+          </div>
         </div>
-      </div>
-      
-      <div class="flex-shrink-0">
-        <button class="rit-action-btn rit-btn-save"
+        <button type="button" class="btn btn-sm btn-save"
                 hx-post="/api/papers/{{ paper.arxiv_id }}/save"
-                hx-target="#seed-paper-{{ paper.arxiv_id }}"
+                {# Attribute selector, not "#seed-paper-…": the dot in an arXiv
+                   id would be read as a CSS class token. See action_buttons.html. #}
+                hx-target="[id='seed-paper-{{ paper.arxiv_id }}']"
                 hx-swap="outerHTML"
                 hx-vals='{"source": "onboarding", "position": {{ loop.index0 }}}'
-                onclick="bumpSeedCount()">
-          <span class="btn-icon">⭐</span> Save
-        </button>
+                onclick="if (window.bumpSeedCount) window.bumpSeedCount()">Save</button>
       </div>
-      
-    </div>
     {% endfor %}
   </div>
 {% elif query %}
-  <div class="rit-error-state max-w-xl mx-auto">
-    <div class="text-3xl mb-3 opacity-60">🔍</div>
-    <p class="font-medium text-sm">No papers found for '{{ query }}'</p>
-    <p class="text-xs opacity-50 mt-1">Try searching for broader keywords.</p>
+  <div class="empty" style="padding:2rem 1rem">
+    <p class="empty-title">Nothing for &ldquo;{{ query }}&rdquo;</p>
+    <p class="empty-body">Try broader wording, or a method or model name.</p>
   </div>
 {% endif %}

app/templates/partials/seed_search.html

@@ -1,86 +1,86 @@
-<div class="text-center mb-8 relative">
-  <div class="rit-hero-glow animate-glow" style="top: -30px; left: 50%; transform: translateX(-50%);"></div>
-  <h2 class="text-3xl font-bold mb-3 font-display relative z-10">Save a few papers you like</h2>
-  <p class="text-base-content/60 max-w-md mx-auto relative z-10">
-    Search for papers in your field and save a few to seed your recommendations.
-  </p>
-</div>
+{#
+  Step 2 — seed papers.
 
-<!-- Seed Progress Bar -->
-<div class="max-w-xl mx-auto mb-8">
-  <div class="flex justify-between items-center mb-2 text-xs font-medium text-base-content/70">
-    <span>Progress</span>
-    <span id="seed-counter">{{ seed_count }}/{{ seed_target }} seeds saved</span>
+  The progress copy names the threshold explicitly. PHASE8 flags this as a known
+  gap: the wizard asks for 5 seeds and Tier 1 (the real multi-interest pipeline)
+  also needs 5, but nothing told the user that — so stopping at 4 silently
+  dropped them onto Tier 3, the weakest path, with no indication why the feed
+  felt poor. Now the number means something on screen.
+#}
+<div class="ob-step">
+  <div class="ob-progress">
+    <span>Step 2 of 2</span>
+    <span class="ob-bar"><i style="width:100%"></i></span>
   </div>
-  <div class="seed-progress-track">
-    <div class="seed-progress-fill" style="width: {{ (seed_count / seed_target * 100) | round | int }}%"></div>
+
+  <div class="ob-head">
+    <span class="ob-kicker">Seed your feed</span>
+    <h1 class="ob-title">Save five papers you already rate</h1>
+    <p class="ob-sub">
+      Five is the real threshold: below it the feed falls back to simpler
+      matching, and at five it starts clustering your interests properly and
+      can keep several going at once.
+    </p>
   </div>
-</div>
 
-<div class="max-w-xl mx-auto">
-  <div class="rit-search-wrapper mb-8">
-    <div class="card bg-base-100 shadow-md rounded-xl">
-      <form class="flex gap-2 p-2 items-center"
-            hx-get="/api/onboarding/seed-search"
-            hx-target="#seed-results"
-            hx-swap="innerHTML"
-            hx-indicator="#seed-loading">
-        <svg class="w-5 h-5 ml-3 text-base-content/30 flex-shrink-0" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
-          <path stroke-linecap="round" stroke-linejoin="round" d="m21 21-6-6m2-5a7 7 0 1 1-14 0 7 7 0 0 1 14 0Z"/>
-        </svg>
-        <input type="text"
-               name="q"
-               value="{{ query | default('') }}"
-               placeholder="Search by keywords or authors..."
-               class="rit-search-input py-2 text-base md:text-lg"
-               autofocus />
-        <button class="btn btn-primary px-5 rounded-lg flex-shrink-0" type="submit">
-          Search
-        </button>
-      </form>
-    </div>
+  <div class="ob-progress" aria-live="polite">
+    <span id="seed-counter" class="mono">{{ seed_count }} of {{ seed_target }}</span>
+    <span class="ob-bar">
+      <i id="seed-fill" style="width: {{ ((seed_count / seed_target * 100) if seed_target else 0) | round | int }}%"></i>
+    </span>
   </div>
-</div>
 
-<div id="seed-loading" class="htmx-indicator w-full text-center py-8">
-  <span class="loading loading-spinner loading-lg text-primary"></span>
-</div>
+  <form class="searchbar"
+        hx-get="/api/onboarding/seed-search"
+        hx-target="#seed-results"
+        hx-swap="innerHTML"
+        hx-indicator="#seed-loading">
+    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.9"
+         stroke-linecap="round" aria-hidden="true">
+      <circle cx="11" cy="11" r="7" /><path d="m21 21-4.3-4.3" />
+    </svg>
+    <input type="search" name="q" value="{{ query | default('') }}"
+           placeholder="A topic, method, or author…" aria-label="Search for seed papers" autofocus />
+    <button class="btn btn-primary btn-sm" type="submit">Search</button>
+  </form>
 
-<div id="seed-results">
-  {% include "partials/seed_results.html" %}
+  <div id="seed-loading" class="htmx-indicator center" style="padding:1.5rem">
+    <span class="spinner" style="margin:0 auto"></span>
+  </div>
+
+  <div id="seed-results">
+    {% include "partials/seed_results.html" %}
+  </div>
 </div>
 
-<!-- Action Footer -->
-<div class="fixed bottom-0 left-0 right-0 p-4 bg-base-200/95 backdrop-blur-md border-t border-base-content/10 z-50">
-  <div class="max-w-4xl mx-auto flex items-center justify-end gap-3">
-    <form action="/api/onboarding/complete" method="post" class="inline">
-      <button type="submit" class="btn btn-ghost btn-sm md:btn-md text-base-content/50">Skip</button>
-    </form>
-    <form action="/api/onboarding/complete" method="post" class="inline">
-      <button type="submit" class="btn btn-primary btn-sm md:btn-md px-6 shadow-lg shadow-primary/20">
-        Finish & View Feed
-        <svg class="w-4 h-4 ml-1" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M9 5l7 7-7 7" /></svg>
-      </button>
-    </form>
+<div class="ob-footer">
+  <div class="wrap" style="max-width:46rem">
+    <div class="row-between">
+      <span class="small muted" id="seed-hint">
+        {% if seed_count >= seed_target %}Ready — your feed will use the full pipeline.
+        {% else %}{{ seed_target - seed_count }} more for the full pipeline.{% endif %}
+      </span>
+      <form action="/api/onboarding/complete" method="post">
+        <button type="submit" class="btn btn-primary btn-sm">Go to my feed</button>
+      </form>
+    </div>
   </div>
 </div>
 
 <script>
-  let _seedCount = {{ seed_count }};
-  const _seedTarget = {{ seed_target }};
-
-  function bumpSeedCount() {
-    _seedCount++;
-    const counterEl = document.getElementById('seed-counter');
-    if (counterEl) {
-      counterEl.innerText = `${_seedCount}/${_seedTarget} seeds saved`;
-    }
-    
-    // Animate progress bar
-    const fillEl = document.querySelector('.seed-progress-fill');
-    if (fillEl) {
-      const percentage = Math.min((_seedCount / _seedTarget) * 100, 100);
-      fillEl.style.width = `${percentage}%`;
-    }
-  }
+  (function () {
+    var count = {{ seed_count }};
+    var target = {{ seed_target }};
+    window.bumpSeedCount = function () {
+      count++;
+      var c = document.getElementById('seed-counter');
+      var f = document.getElementById('seed-fill');
+      var h = document.getElementById('seed-hint');
+      if (c) c.textContent = count + ' of ' + target;
+      if (f) f.style.width = Math.min((count / target) * 100, 100) + '%';
+      if (h) h.textContent = count >= target
+        ? 'Ready — your feed will use the full pipeline.'
+        : (target - count) + ' more for the full pipeline.';
+    };
+  })();
 </script>

app/templates/partials/skeleton.html

@@ -1,37 +1,25 @@
 {#
-  Reusable skeleton loader — matches the shape of paper cards.
-  Include N times for N placeholder cards. Each card has:
-  - Title line + category badge
-  - Meta line (year + arxiv id + authors)
-  - 3 abstract text lines (varying widths)
-  - Action buttons row
-  All lines use the shimmer animation.
+  Skeleton loader. Mirrors the real card's geometry so the swap does not shift
+  layout — Nielsen's response-time limits put anything past ~1s in "needs
+  feedback" territory, and Tier 1 of this pipeline is multi-second.
+
+  Include with `count` set, e.g. {% set count = 4 %}{% include "partials/skeleton.html" %}
 #}
-<div class="space-y-4">
+<div class="feed" aria-hidden="true">
   {% for i in range(count | default(3)) %}
-  <div class="skeleton-card animate-card-in" style="animation-delay: {{ i * 0.08 }}s">
-    <!-- Title row -->
-    <div class="flex items-start justify-between gap-3 mb-3">
-      <div class="skeleton-line skeleton-line-title"></div>
-      <div class="skeleton-line skeleton-line-badge flex-shrink-0"></div>
+    <div class="skel-card">
+      <div class="skel skel-meta"></div>
+      <div class="skel skel-title"></div>
+      <div class="skel skel-title2"></div>
+      <div class="skel skel-auth"></div>
+      <div class="skel skel-text"></div>
+      <div class="skel skel-text-2"></div>
+      <div class="skel skel-text-3"></div>
+      <div class="row" style="gap:.4rem;padding-top:.3rem">
+        <div class="skel skel-btn"></div>
+        <div class="skel skel-btn"></div>
+      </div>
     </div>
-    <!-- Meta row -->
-    <div class="flex items-center gap-2 mb-3">
-      <div class="skeleton-line" style="height: 14px; width: 36px; border-radius: 5px;"></div>
-      <div class="skeleton-line skeleton-line-meta"></div>
-    </div>
-    <!-- Abstract lines -->
-    <div class="space-y-2 mb-3">
-      <div class="skeleton-line skeleton-line-text"></div>
-      <div class="skeleton-line skeleton-line-text-md"></div>
-      <div class="skeleton-line skeleton-line-text-sm"></div>
-    </div>
-    <!-- Action buttons row -->
-    <div class="flex gap-2">
-      <div class="skeleton-line skeleton-line-btn"></div>
-      <div class="skeleton-line skeleton-line-btn"></div>
-      <div class="skeleton-line" style="height: 28px; width: 56px; border-radius: 8px;"></div>
-    </div>
-  </div>
   {% endfor %}
 </div>
+<span class="sr-only" role="status">Loading recommendations…</span>

app/templates/saved.html

@@ -1,80 +1,38 @@
 {% extends "base.html" %}
 
-{% block title %}Saved Papers — ResearchIT{% endblock %}
+{% block title %}Library — ResearchIT{% endblock %}
+
+{#
+  Both "Coming Soon" blocks are gone — Collections and Weekly Digest. They
+  occupied the most valuable space on the page to advertise things that do not
+  exist. The empty state now says what saving actually does instead.
+#}
 
 {% block content %}
-<div class="fade-in">
+<div class="wrap wrap--feed">
 
-  <!-- Header -->
-  <div class="flex items-center gap-3 mb-2">
-    <h1 class="text-2xl md:text-3xl font-bold font-display">Your Library</h1>
-    <span class="stat-pill bg-primary/10 text-primary">{{ count }}</span>
+  <div class="sec-head">
+    <h1 class="sec-title">Library</h1>
+    {% if count %}<span class="pill">{{ count }}</span>{% endif %}
   </div>
-  
-  {% if count > 0 %}
-  <p class="text-sm text-base-content/50 mb-8">
-    You've explored {{ count }} paper{{ "s" if count != 1 else "" }} so far.
-  </p>
-  {% endif %}
 
   {% if count > 0 %}
-    <div class="space-y-4">
+    <div class="feed">
       {% for paper in papers %}
         {% set position = loop.index0 %}
         {% set source = "saved" %}
         {% include "partials/paper_card.html" %}
       {% endfor %}
     </div>
-
-    <!-- Coming Soon: Collections -->
-    <div class="mt-8 coming-soon-section" onclick="handleComingSoon(event)">
-      <div class="flex items-center justify-between">
-        <div class="flex items-center gap-3">
-          <span class="text-2xl opacity-50">📁</span>
-          <div>
-            <div class="flex items-center gap-2 mb-0.5">
-              <span class="text-sm font-medium text-base-content/50">Collections</span>
-              <span class="coming-soon-badge">🔒 Coming Soon</span>
-            </div>
-            <p class="text-xs text-base-content/40">Organize your papers into named folders and reading lists.</p>
-          </div>
-        </div>
-        <button class="btn btn-ghost btn-sm btn-circle opacity-50 pointer-events-none">
-          <svg class="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M12 4v16m8-8H4" /></svg>
-        </button>
-      </div>
-    </div>
   {% else %}
-    <!-- Empty State -->
-    <div class="text-center py-16 space-y-4 max-w-md mx-auto">
-      <div class="text-5xl mb-4 opacity-70">📚</div>
-      <h3 class="text-xl font-bold font-display">Your library is empty</h3>
-      <p class="text-base-content/50 leading-relaxed">
-        Papers you save while searching or browsing your feed will appear here. They are used to build your behavioral profile.
+    <div class="empty">
+      <p class="empty-title">Nothing saved yet</p>
+      <p class="empty-body">
+        Papers you save are what the feed learns from — every save sharpens
+        what shows up next. Five is roughly where it starts feeling personal.
       </p>
-      
-      <div class="pt-4">
-        <a href="/search" class="btn btn-primary px-6 shadow-lg shadow-primary/20">
-          <svg class="w-4 h-4 mr-2" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
-            <path stroke-linecap="round" stroke-linejoin="round" d="m21 21-6-6m2-5a7 7 0 1 1-14 0 7 7 0 0 1 14 0Z"/>
-          </svg>
-          Start Searching
-        </a>
-      </div>
-    </div>
-
-    <!-- Coming Soon: Weekly Digest -->
-    <div class="mt-12 max-w-md mx-auto coming-soon-wrapper interactive" onclick="handleComingSoon(event)">
-      <div class="card bg-base-100 border border-base-content/5 p-5 text-center">
-        <div class="text-2xl mb-2">📬</div>
-        <div class="flex items-center justify-center gap-2 mb-2">
-          <h4 class="font-medium">Weekly Digest</h4>
-          <span class="coming-soon-badge">🔒 Soon</span>
-        </div>
-        <p class="text-xs text-base-content/50 mb-4">
-          Get a personalized email summary of new papers matching your interests every Monday.
-        </p>
-        <button class="btn btn-outline btn-sm w-full pointer-events-none opacity-50">Subscribe</button>
+      <div style="padding-top:.4rem">
+        <a href="/search" class="btn btn-primary btn-sm">Find papers</a>
       </div>
     </div>
   {% endif %}

app/templates/search.html

@@ -1,72 +1,40 @@
 {% extends "base.html" %}
 
-{% block title %}Search — ResearchIT{% endblock %}
+{% block title %}{% if query %}{{ query }} — Search{% else %}Search{% endif %} — ResearchIT{% endblock %}
 
-{% block content %}
-<div class="space-y-6 fade-in">
-
-  <!-- Search bar -->
-  <div class="rit-search-wrapper">
-    <div class="card bg-base-100 shadow-md rounded-xl p-4">
-      <form id="search-form"
-            hx-get="/search"
-            hx-target="#search-results"
-            hx-push-url="true"
-            hx-trigger="submit"
-            class="flex gap-2 items-center">
-        <input type="text"
-               name="q"
-               value="{{ query }}"
-               placeholder="Search arXiv papers…"
-               class="rit-search-input flex-1"
-               autofocus
-               onkeydown="if(event.key==='Enter'){event.preventDefault(); htmx.trigger(document.getElementById('search-form'), 'submit');}" />
-        <button class="btn btn-primary flex items-center gap-2" type="submit">
-          <span class="search-btn-text">
-            <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" />
-            </svg>
-            Search
-          </span>
-          <span class="search-btn-loading hidden">
-            <span class="loading loading-spinner loading-sm"></span>
-            Searching…
-          </span>
-        </button>
-      </form>
-      <p class="text-xs text-base-content/40 mt-2 text-center">Search across 1.6M+ papers</p>
-    </div>
-  </div>
+{#
+  Search deliberately does NOT get the infinite feed. NN/g's guidance is that
+  infinite scroll suits "homogeneous items with no particular task or goal in
+  mind" and works against users who are trying to find something specific or
+  compare items — which is exactly what search is for. Results stay bounded.
+#}
 
-  <!-- Loading overlay (outside search-results so it doesn't get swapped away) -->
-  <div id="search-loading" class="hidden">
+{% block content %}
+<div class="wrap wrap--feed stack stack-4">
+
+  <form class="searchbar"
+        hx-get="/search"
+        hx-target="#search-results"
+        hx-push-url="true"
+        hx-indicator="#search-loading">
+    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.9"
+         stroke-linecap="round" aria-hidden="true">
+      <circle cx="11" cy="11" r="7" /><path d="m21 21-4.3-4.3" />
+    </svg>
+    <input type="search" name="q" value="{{ query }}"
+           placeholder="Search 1.6M papers…"
+           aria-label="Search papers"
+           {% if not query %}autofocus{% endif %} />
+    <button class="btn btn-primary btn-sm" type="submit">Search</button>
+  </form>
+
+  <div id="search-loading" class="htmx-indicator">
     {% set count = 3 %}{% include "partials/skeleton.html" %}
-    <div id="search-progress-msgs" class="rit-progress-container mt-4"></div>
   </div>
 
-  <!-- Recommendations — only when not actively searching -->
-  {% if has_recs and not query %}
-  <section id="rec-wrapper">
-    <h2 class="text-lg font-semibold mb-3">Recommended for You</h2>
-    <div id="rec-section"
-         hx-get="/api/recommendations"
-         hx-trigger="load"
-         hx-swap="innerHTML">
-      <div class="space-y-3">
-        {% set count = 2 %}{% include "partials/skeleton.html" %}
-      </div>
-    </div>
-  </section>
-  {% endif %}
-
-  <!-- Search results -->
   <div id="search-results">
     {% include "partials/search_results.html" %}
   </div>
 
 </div>
 {% endblock %}
-
-{% block scripts %}
-<!-- Search page JS now handled by app.js global HTMX listeners -->
-{% endblock %}

app/templates_env.py

@@ -3,6 +3,8 @@ Shared Jinja2 environment with custom filters.
 Import `templates` from here instead of creating it per-router.
 """
 import json
+import re
+
 from fastapi.templating import Jinja2Templates
 
 templates = Jinja2Templates(directory="app/templates")
@@ -19,4 +21,173 @@ def _tojson_parse(value: str | None) -> list:
         return []
 
 
+# ── Abstract lead-sentence split ─────────────────────────────────────────────
+#
+# The paper card emphasises the abstract's first sentence and dims the rest.
+# Two pieces of evidence drive this:
+#
+#   * Scholar Inbox (ACL 2025 Demo) highlights "the sentence most related to
+#     the idea of the research paper" specifically to enable skim-reading on
+#     mobile.  We have no relevance model over sentences, but an abstract's
+#     opening sentence carries its claim almost always, so it is a cheap and
+#     honest approximation of the same affordance.
+#   * NN/g's F-pattern eyetracking finds attention decays sharply after the
+#     first couple of lines, so the highest-signal text has to live there
+#     rather than at character 400.
+#
+# Splitting on ". " naively breaks on the things abstracts are full of:
+# decimals (0.95), initials (J. Smith), and abbreviations (e.g., et al.,
+# Fig. 2).  The guard below handles those rather than shipping a lead that
+# reads "We evaluate on MS."
+
+_ABBREV = {
+    "e.g", "i.e", "et al", "al", "cf", "vs", "resp", "approx", "ca",
+    "fig", "figs", "eq", "eqs", "ref", "refs", "sec", "secs", "tab", "tabs",
+    "no", "nos", "vol", "pp", "ch", "dr", "prof", "mr", "mrs", "ms", "st",
+    "inc", "ltd", "etc", "vs", "w.r.t", "s.t", "i.i.d",
+}
+
+# A sentence end: '.', '!' or '?' then whitespace then something that starts a
+# new sentence (capital, digit, quote, or an opening bracket).
+_SENT_END = re.compile(r'([.!?])\s+(?=[A-Z0-9"“(\[])')
+
+_MIN_LEAD = 40    # below this the "sentence" is a fragment, not a claim
+_MAX_LEAD = 340   # above this it stops being a scannable lead
+
+
+def _is_false_stop(text: str, dot_index: int) -> bool:
+    """True when the '.' at dot_index does not actually end a sentence."""
+    before = text[:dot_index]
+
+    # Decimal number: "0.95", "1.5x"
+    if before and before[-1].isdigit() and dot_index + 1 < len(text) \
+            and text[dot_index + 1: dot_index + 2].isdigit():
+        return True
+
+    # Trailing token, lowercased, without its dots — "e.g", "et al", "fig"
+    token = re.split(r"[\s(\[]", before)[-1].rstrip(".").lower()
+    if token in _ABBREV:
+        return True
+
+    # Single-letter initial: "J. Smith", "A. Vaswani"
+    if len(token) == 1 and token.isalpha():
+        return True
+
+    return False
+
+
+def _lead_split(abstract: str | None) -> tuple[str, str]:
+    """
+    Split an abstract into (lead_sentence, remainder).
+
+    Returns ("", "") for empty input, and (whole, "") when no confident
+    sentence boundary is found — callers then render the whole abstract
+    unemphasised rather than guessing.
+    """
+    text = (abstract or "").strip()
+    if not text:
+        return "", ""
+
+    for match in _SENT_END.finditer(text):
+        end = match.end(1)          # index just past the '.'/'!'/'?'
+        if _is_false_stop(text, match.start(1)):
+            continue
+        if end < _MIN_LEAD:
+            continue
+        if end > _MAX_LEAD:
+            break
+        return text[:end].strip(), text[end:].strip()
+
+    # No usable boundary. If the abstract is short enough to read whole, treat
+    # it as all-lead; otherwise return it unsplit so nothing is emphasised.
+    if len(text) <= _MAX_LEAD:
+        return text, ""
+    return "", text
+
+
+def _lead(abstract: str | None) -> str:
+    return _lead_split(abstract)[0]
+
+
+def _lead_rest(abstract: str | None) -> str:
+    return _lead_split(abstract)[1]
+
+
+# ── arXiv category → chip class ──────────────────────────────────────────────
+#
+# Maps a primary arXiv code onto one of the ten chip hues in styles.css.
+# Lives here rather than in the template because the template was carrying a
+# ten-branch if/elif chain that had to be duplicated wherever a card appeared.
+# Green is deliberately unused — it is reserved for Save.
+
+_CAT_RULES: list[tuple[tuple[str, ...], str]] = [
+    (("cs.CL", "cs.IR"), "cat-cl"),
+    (("cs.CV",), "cat-cv"),
+    (("cs.LG", "stat.ML", "stat."), "cat-lg"),
+    (("cs.AI", "cs.NE", "cs.MA"), "cat-ai"),
+    (("cs.RO", "cs.SY", "eess.SY"), "cat-ro"),
+    (("astro-ph",), "cat-astro"),
+    (("hep", "quant-ph", "physics", "cond-mat", "nucl", "gr-qc", "nlin"), "cat-phys"),
+    (("math", "cs.GT", "cs.DM", "cs.CC", "econ", "q-fin"), "cat-math"),
+    (("q-bio",), "cat-bio"),
+    (("eess", "cs.SD", "cs.SE", "cs.PL", "cs.CR", "cs.DC",
+      "cs.NI", "cs.HC", "cs.DB", "cs.OS"), "cat-eng"),
+]
+
+
+def _cat_class(category: str | None) -> str:
+    """Return the chip class for an arXiv category code."""
+    code = (category or "").strip()
+    if not code:
+        return "cat"
+    for prefixes, cls in _CAT_RULES:
+        for p in prefixes:
+            if code.startswith(p):
+                return cls
+    return "cat"
+
+
+# ── "Why am I seeing this?" ──────────────────────────────────────────────────
+#
+# The serving tier already records WHY a paper was retrieved, per candidate, in
+# `candidate_source` — it just never reached the user, who instead saw a
+# "Why this paper? 🔒 Coming Soon" badge on every card. This turns the existing
+# value into a sentence.
+#
+# Deliberately vague about cluster identity: clusters are numbered, not named
+# (labelling them is Phase 8), so claiming more than "one of your recurring
+# interests" would be inventing detail the system does not have.
+
+_WHY = {
+    "exploration": "Outside your usual areas — included to keep your feed from narrowing.",
+    "short_term_supplement": "Based on what you have been reading in this session.",
+    "ewma_longterm": "Close to the overall profile built from your saved papers.",
+    "qdrant_recommend": "Similar to papers already in your library.",
+    "trending_category_fallback": "Widely cited recently in the areas you picked during setup.",
+}
+
+
+def _why_shown(candidate_source: str | None) -> str:
+    """Human-readable reason a paper appeared, or '' when there isn't one."""
+    src = (candidate_source or "").strip()
+    if not src:
+        return ""
+    if src.startswith("cluster_"):
+        return "Matches one of the recurring interests in your library."
+    return _WHY.get(src, "")
+
+
+def _commafy(value) -> str:
+    """1204 -> '1,204'. Returns '' for anything non-numeric."""
+    try:
+        return f"{int(value):,}"
+    except (TypeError, ValueError):
+        return ""
+
+
 templates.env.filters["tojson_parse"] = _tojson_parse
+templates.env.filters["lead"] = _lead
+templates.env.filters["lead_rest"] = _lead_rest
+templates.env.filters["cat_class"] = _cat_class
+templates.env.filters["why_shown"] = _why_shown
+templates.env.filters["commafy"] = _commafy

requirements-dev.txt

@@ -0,0 +1,16 @@
+# Development / test-only dependencies.
+#
+# Deliberately NOT in requirements.txt: the Dockerfile installs that file, and
+# `playwright install chromium` pulls ~95 MB of browser into the image for code
+# that never runs in production.
+#
+# Setup:
+#     pip install -r requirements-dev.txt
+#     playwright install chromium
+#
+# The browser suite skips itself when playwright is absent or no server is
+# reachable, so the unit suite still runs in an environment without either.
+-r requirements.txt
+
+playwright>=1.40
+pytest-playwright>=0.4

tests/test_e2e_browser.py

@@ -0,0 +1,382 @@
+"""
+Browser end-to-end tests.
+
+WHY THIS FILE EXISTS
+--------------------
+Two frontend bugs shipped to production while every server-side check passed:
+HTTP 200s, correct rendered markup, correct database writes, full suite green.
+Both were only observable in a real browser.
+
+  1. Save did nothing.  hx-target="#actions-1706.03762" — a dot in a CSS id
+     selector starts a class token, so that parses as id="actions-1706" AND
+     class="03762", and a class token cannot begin with a digit, so
+     querySelector raises rather than merely missing.  The POST fired and the
+     row was written; only the swap never happened.
+
+  2. Infinite scroll never fired.  hx-trigger="revealed, click" — htmx's
+     revealed poller matches the attribute string exactly
+     ("[hx-trigger='revealed']"), so a combined trigger can never be selected.
+
+Neither is detectable without executing the page.  These tests drive a real
+Chromium, so they fail if a swap does not happen — which is the entire point.
+
+RUNNING
+-------
+    .venv/bin/python -m pytest tests/test_e2e_browser.py -v
+
+Requires a live server; by default http://127.0.0.1:7860.  Point at the
+deployed Space with:
+
+    E2E_BASE_URL=https://siddhm11-researchit.hf.space .venv/bin/python -m pytest tests/test_e2e_browser.py -v
+
+Skips itself (rather than failing) when playwright is absent or no server is
+reachable, so it never blocks the unit suite in an environment without them.
+"""
+from __future__ import annotations
+
+import os
+import uuid
+
+import pytest
+
+playwright_api = pytest.importorskip(
+    "playwright.sync_api", reason="playwright not installed"
+)
+sync_playwright = playwright_api.sync_playwright
+
+BASE_URL = os.getenv("E2E_BASE_URL", "http://127.0.0.1:7860").rstrip("/")
+
+# The feed pipeline is genuinely slow on a cold cache (Ward clustering, ANN over
+# binary-quantised vectors, metadata fetch), so waits here are generous. These
+# are correctness tests, not latency tests.
+FEED_TIMEOUT_MS = 90_000
+SWAP_TIMEOUT_MS = 30_000
+
+
+def _server_up() -> bool:
+    import urllib.error
+    import urllib.request
+    try:
+        urllib.request.urlopen(f"{BASE_URL}/healthz/reranker", timeout=15)
+        return True
+    except (urllib.error.URLError, OSError):
+        return False
+
+
+pytestmark = pytest.mark.skipif(
+    not _server_up(), reason=f"no server reachable at {BASE_URL}"
+)
+
+
+@pytest.fixture(scope="module")
+def browser():
+    with sync_playwright() as p:
+        b = p.chromium.launch()
+        yield b
+        b.close()
+
+
+@pytest.fixture
+def page(browser):
+    # A fresh user per test: cookie identity drives the whole recommendation
+    # cascade, so sharing one would let tests leak state into each other.
+    ctx = browser.new_context(viewport={"width": 1280, "height": 900})
+    ctx.add_cookies([{
+        "name": "arxiv_user_id",
+        "value": f"e2e-{uuid.uuid4()}",
+        "url": BASE_URL,
+    }])
+    pg = ctx.new_page()
+    yield pg
+    ctx.close()
+
+
+def _onboard(page, categories=("nlp",)):
+    """Complete onboarding fully, so `/` serves a feed instead of redirecting.
+
+    Onboarding is only 'complete' once /api/onboarding/complete has been
+    POSTed — selecting categories is not enough. Until then `/` answers 302
+    back to /onboarding, so any test that skips the final step waits forever
+    for a card that is never rendered.
+    """
+    page.goto(f"{BASE_URL}/onboarding", wait_until="domcontentloaded")
+    page.wait_for_selector(".cat-opt", timeout=SWAP_TIMEOUT_MS)
+    for key in categories:
+        page.click(f'.cat-opt[data-key="{key}"]')
+    page.click("#continue-btn")
+    page.wait_for_selector("#step-2 .searchbar", timeout=SWAP_TIMEOUT_MS)
+
+    # Step 2's footer submits the form that marks onboarding done.
+    page.click(".ob-footer button[type=submit]")
+    page.wait_for_url(f"{BASE_URL}/", timeout=SWAP_TIMEOUT_MS)
+
+
+def _load_feed(page):
+    """Open the feed and wait for it to resolve either way.
+
+    Skips — rather than hanging for the full timeout — when the feed comes back
+    empty. That is the normal outcome for a deployment with no metadata
+    sidecar: Tier 0 trending falls back to a LIKE scan over 1.6M Turso rows,
+    which exceeds its own client timeout and yields nothing, so no card will
+    ever appear and waiting the full 90s only slows the suite down.
+    """
+    page.goto(BASE_URL, wait_until="domcontentloaded")
+    page.wait_for_selector("article.card, .empty", timeout=FEED_TIMEOUT_MS)
+    if page.locator("article.card").count() == 0:
+        pytest.skip("feed served no papers (no metadata sidecar on this target)")
+
+
+# ── Bug 1: the Save swap ─────────────────────────────────────────────────────
+
+def test_save_button_swaps_to_saved_state(page):
+    """Clicking Save must visibly become 'Saved'.
+
+    Regression test for the dot-in-id selector bug: the POST succeeded and the
+    interaction row was written even while this was broken, so only asserting
+    on the response would have passed.
+    """
+    page.goto(f"{BASE_URL}/search?q=chain+of+thought+prompting",
+              wait_until="domcontentloaded")
+    card = page.locator("article.card").first
+    card.wait_for(timeout=FEED_TIMEOUT_MS)
+
+    save = card.locator("button.btn-save")
+    assert save.inner_text().strip().startswith("Save"), "expected an unsaved card"
+
+    save.click()
+
+    # The swap replaces the actions row; wait for the new state to appear.
+    saved = card.locator("button.btn-save[disabled]")
+    saved.wait_for(timeout=SWAP_TIMEOUT_MS)
+    assert "Saved" in saved.inner_text()
+    assert card.locator("button.btn-pass").inner_text().strip() == "Remove"
+
+
+def test_save_target_selectors_are_resolvable(page):
+    """Every hx-target on the page must actually resolve in the DOM.
+
+    This is the generalised form of bug 1 — it catches ANY id whose characters
+    break a CSS selector, not just the dot case, and it does so without having
+    to click each control.
+    """
+    page.goto(f"{BASE_URL}/search?q=transformer", wait_until="domcontentloaded")
+    page.locator("article.card").first.wait_for(timeout=FEED_TIMEOUT_MS)
+
+    bad = page.evaluate(
+        """() => {
+            const out = [];
+            document.querySelectorAll('[hx-target]').forEach(el => {
+                const sel = el.getAttribute('hx-target');
+                // htmx's extended syntax is not a plain CSS selector
+                if (/^(this|closest |find |next|previous)/.test(sel)) return;
+                try {
+                    if (document.querySelectorAll(sel).length !== 1) {
+                        out.push([sel, 'matched ' + document.querySelectorAll(sel).length]);
+                    }
+                } catch (e) {
+                    out.push([sel, 'SyntaxError: ' + e.message]);
+                }
+            });
+            return out;
+        }"""
+    )
+    assert bad == [], f"unresolvable hx-target selectors: {bad}"
+
+
+def test_saved_paper_appears_in_library(page):
+    """Save must persist: the paper shows up in the Library on a fresh load."""
+    page.goto(f"{BASE_URL}/search?q=chain+of+thought+prompting",
+              wait_until="domcontentloaded")
+    card = page.locator("article.card").first
+    card.wait_for(timeout=FEED_TIMEOUT_MS)
+    arxiv_id = card.get_attribute("data-arxiv-id")
+
+    card.locator("button.btn-save").click()
+    card.locator("button.btn-save[disabled]").wait_for(timeout=SWAP_TIMEOUT_MS)
+
+    page.goto(f"{BASE_URL}/saved", wait_until="domcontentloaded")
+    page.locator("article.card").first.wait_for(timeout=SWAP_TIMEOUT_MS)
+    assert page.locator(f'article.card[data-arxiv-id="{arxiv_id}"]').count() == 1
+
+
+# ── Bug 2: infinite scroll ───────────────────────────────────────────────────
+
+def test_scrolling_appends_more_papers(page):
+    """Scrolling to the bottom must load another page WITHOUT any click.
+
+    Regression test for the htmx trigger bug. The loader element rendered
+    correctly and its endpoint returned 200 the whole time it was broken, so
+    markup and HTTP assertions both passed.
+    """
+    _onboard(page)
+    _load_feed(page)
+
+    before = page.locator("article.card").count()
+    assert before > 0
+
+    if page.locator(".feed-more").count() == 0:
+        pytest.skip("feed had only one page for this user")
+
+    page.mouse.wheel(0, 40_000)
+    # The observer uses an 800px rootMargin, so this should fire before the
+    # loader is even fully on screen.
+    page.wait_for_function(
+        f"document.querySelectorAll('article.card').length > {before}",
+        timeout=SWAP_TIMEOUT_MS,
+    )
+    after = page.locator("article.card").count()
+    assert after > before, f"scroll appended nothing ({before} -> {after})"
+
+
+def test_feed_has_no_duplicate_papers_across_pages(page):
+    """Paging must not repeat a paper the user has already been shown."""
+    _onboard(page)
+    _load_feed(page)
+
+    for _ in range(3):
+        if page.locator(".feed-more").count() == 0:
+            break
+        n = page.locator("article.card").count()
+        page.mouse.wheel(0, 40_000)
+        try:
+            page.wait_for_function(
+                f"document.querySelectorAll('article.card').length > {n}",
+                timeout=SWAP_TIMEOUT_MS,
+            )
+        except Exception:
+            break
+
+    ids = page.eval_on_selector_all(
+        "article.card", "els => els.map(e => e.dataset.arxivId)"
+    )
+    assert len(ids) == len(set(ids)), f"duplicate papers in feed: {ids}"
+
+
+# ── Dismiss + undo ───────────────────────────────────────────────────────────
+
+def test_dismiss_shows_undo_and_undo_cancels_the_request(page):
+    """Undo must CANCEL the dismissal, not compensate for it.
+
+    This matters beyond UX: a committed dismissal is folded into the user's
+    negative EWMA profile, and an EWMA is a lossy running average with no exact
+    inverse — so an undone dismissal must never have been sent at all.
+    """
+    page.goto(f"{BASE_URL}/search?q=transformer", wait_until="domcontentloaded")
+    page.locator("article.card").first.wait_for(timeout=FEED_TIMEOUT_MS)
+
+    posts: list[str] = []
+    page.on("request", lambda r: posts.append(r.url) if r.method == "POST" else None)
+
+    card = page.locator("article.card").first
+    arxiv_id = card.get_attribute("data-arxiv-id")
+    card.locator("button.btn-pass").click()
+
+    # .first throughout: an error toast can coexist with the undo toast (a slow
+    # backend makes that routine), and a bare .toast locator then raises a
+    # strict-mode violation instead of testing anything.
+    undo = page.locator(".toast .undo").first
+    undo.wait_for(timeout=10_000)
+    assert "Removed" in page.locator(".toast .msg").first.inner_text()
+    undo.click()
+
+    # Wait past the commit window to prove the POST was truly cancelled.
+    page.wait_for_timeout(6_500)
+    assert page.locator(f'article.card[data-arxiv-id="{arxiv_id}"]').count() == 1, \
+        "undo did not restore the card"
+    assert not any("not-interested" in u for u in posts), \
+        f"undo failed to cancel the dismissal POST: {posts}"
+
+
+def test_dismiss_commits_when_not_undone(page):
+    """Left alone, a dismissal must actually be sent after the undo window."""
+    page.goto(f"{BASE_URL}/search?q=transformer", wait_until="domcontentloaded")
+    page.locator("article.card").first.wait_for(timeout=FEED_TIMEOUT_MS)
+
+    posts: list[str] = []
+    page.on("request", lambda r: posts.append(r.url) if r.method == "POST" else None)
+
+    page.locator("article.card").first.locator("button.btn-pass").click()
+    page.wait_for_timeout(7_000)
+    assert any("not-interested" in u for u in posts), \
+        f"dismissal was never committed: {posts}"
+
+
+# ── Theme, layout, console health ────────────────────────────────────────────
+
+def test_theme_toggle_switches_and_persists(page):
+    """Toggling theme must stamp the root element and survive a reload."""
+    # /search rather than / — a brand-new user is redirected off the feed into
+    # onboarding, which has no topbar.
+    page.goto(f"{BASE_URL}/search", wait_until="domcontentloaded")
+    page.wait_for_selector(".topbar", timeout=SWAP_TIMEOUT_MS)
+
+    page.click(".theme-toggle")
+    stamped = page.evaluate("document.documentElement.getAttribute('data-theme')")
+    assert stamped in ("light", "dark"), f"toggle did not stamp a theme: {stamped}"
+
+    page.reload(wait_until="domcontentloaded")
+    assert page.evaluate(
+        "document.documentElement.getAttribute('data-theme')") == stamped, \
+        "theme did not persist across reload"
+
+
+def test_text_is_legible_in_both_themes(page):
+    """Body text must never resolve to the same colour as its background.
+
+    Catches the classic broken-artifact bug where a colour token is defined only
+    inside a media query, so one theme renders its text on the other's ground.
+    """
+    page.goto(f"{BASE_URL}/search?q=transformer", wait_until="domcontentloaded")
+    page.locator("article.card").first.wait_for(timeout=FEED_TIMEOUT_MS)
+
+    for theme in ("light", "dark"):
+        page.evaluate(f"document.documentElement.setAttribute('data-theme','{theme}')")
+        colours = page.evaluate(
+            """() => {
+                const t = document.querySelector('.card-title');
+                const c = document.querySelector('article.card');
+                const s = getComputedStyle(t), cs = getComputedStyle(c);
+                return {text: s.color, cardBg: cs.backgroundColor,
+                        bodyBg: getComputedStyle(document.body).backgroundColor};
+            }"""
+        )
+        assert colours["text"] != colours["cardBg"], \
+            f"{theme}: title colour equals card background ({colours})"
+        assert colours["bodyBg"] not in ("rgba(0, 0, 0, 0)", "transparent"), \
+            f"{theme}: body background is transparent ({colours})"
+
+
+def test_no_console_errors_on_feed(page):
+    """A clean console. Both shipped bugs were silent, but this is cheap."""
+    errors: list[str] = []
+    page.on("console", lambda m: errors.append(m.text) if m.type == "error" else None)
+    page.on("pageerror", lambda e: errors.append(str(e)))
+
+    _onboard(page)
+    _load_feed(page)
+    page.mouse.wheel(0, 40_000)
+    page.wait_for_timeout(4_000)
+
+    # Ignore network noise from third-party/offline resources; we care about JS.
+    real = [e for e in errors if "net::" not in e and "favicon" not in e]
+    assert real == [], f"console errors: {real}"
+
+
+def test_no_horizontal_overflow_on_mobile(page, browser):
+    """The page body must never scroll sideways on a phone viewport."""
+    ctx = browser.new_context(viewport={"width": 390, "height": 844},
+                              is_mobile=True, has_touch=True)
+    ctx.add_cookies([{"name": "arxiv_user_id",
+                      "value": f"e2e-{uuid.uuid4()}", "url": BASE_URL}])
+    p = ctx.new_page()
+    try:
+        p.goto(f"{BASE_URL}/search?q=transformer", wait_until="domcontentloaded")
+        p.locator("article.card").first.wait_for(timeout=FEED_TIMEOUT_MS)
+        overflow = p.evaluate(
+            "() => document.documentElement.scrollWidth - document.documentElement.clientWidth")
+        assert overflow <= 1, f"page scrolls horizontally by {overflow}px"
+
+        # Bottom nav must not cover the last card's controls.
+        assert p.locator(".botnav").is_visible()
+    finally:
+        ctx.close()

tests/test_template_selectors.py

@@ -0,0 +1,169 @@
+"""
+Static guard against htmx selector bugs that only manifest in a browser.
+
+Background
+----------
+htmx passes hx-target / hx-select / hx-include values straight to
+document.querySelectorAll with NO escaping. An arXiv id contains a dot, and in
+a CSS selector a dot starts a class token, so
+
+    #actions-1706.03762   parses as  id="actions-1706" AND class="03762"
+
+and because a class token may not begin with a digit, querySelector *raises*
+rather than merely failing to match. The result is a control that silently does
+nothing while the server still returns 200 and writes its row.
+
+This is a known, unfixed defect in the 1.x line — htmx issues #1537 and #2601.
+Maintainer position is that escaping is the application's responsibility;
+CSS.escape was rejected for 1.x over IE11 compatibility and only landed in
+2.0.5+. This project is pinned to htmx 1.9.12, so the fix will never arrive
+upstream and these rules have to be enforced here.
+
+The sanctioned workaround is the attribute form, [id='…'], which matches any id
+regardless of its characters.
+
+These are plain string checks over the templates: no server, no browser, fast
+enough to run on every commit. tests/test_e2e_browser.py covers the same class
+dynamically, but needs a live server and a real Chromium.
+"""
+from __future__ import annotations
+
+import re
+from pathlib import Path
+
+import pytest
+
+TEMPLATES = Path(__file__).resolve().parents[1] / "app" / "templates"
+
+# htmx attributes whose value is fed to querySelectorAll.
+SELECTOR_ATTRS = (
+    "hx-target", "hx-select", "hx-select-oob",
+    "hx-include", "hx-indicator", "hx-disabled-elt",
+)
+
+# htmx's extended, non-CSS selector syntax — exempt from the id rules.
+_EXTENDED = re.compile(r"^\s*(this\b|closest\s|find\s|next\b|previous\b|body\b|window\b|document\b)")
+
+
+_JINJA_COMMENT = re.compile(r"\{#.*?#\}", re.S)
+_HTML_COMMENT = re.compile(r"<!--.*?-->", re.S)
+
+
+def _template_files() -> list[Path]:
+    return sorted(TEMPLATES.rglob("*.html"))
+
+
+def _live_markup(path: Path) -> str:
+    """Template text with comments stripped.
+
+    These rules describe attributes the browser actually sees. Comments in
+    this codebase deliberately quote the broken forms to explain why they are
+    banned, so scanning raw text flags its own documentation.
+    """
+    text = path.read_text()
+    text = _JINJA_COMMENT.sub("", text)
+    return _HTML_COMMENT.sub("", text)
+
+
+def _selector_attrs(text: str) -> list[tuple[str, str]]:
+    pattern = re.compile(
+        r'(' + "|".join(SELECTOR_ATTRS) + r')\s*=\s*"([^"]*)"'
+    )
+    return pattern.findall(text)
+
+
+def test_no_id_selector_interpolates_a_template_variable():
+    """`hx-target="#thing-{{ var }}"` is banned outright.
+
+    Any Jinja value can contain a dot, colon or leading digit; each of those
+    breaks or throws inside a `#id` selector. Use `[id='thing-{{ var }}']`.
+    """
+    offenders: list[str] = []
+    for path in _template_files():
+        for attr, value in _selector_attrs(_live_markup(path)):
+            if _EXTENDED.match(value):
+                continue
+            if value.lstrip().startswith("#") and "{{" in value:
+                offenders.append(f"{path.name}: {attr}=\"{value}\"")
+
+    assert offenders == [], (
+        "id selectors built from template variables must use the attribute "
+        "form [id='…'] — htmx 1.x does not escape them (issues #1537, #2601):\n  "
+        + "\n  ".join(offenders)
+    )
+
+
+def test_static_id_selectors_are_valid_css():
+    """Hard-coded `#foo` targets must be selectors a browser accepts."""
+    bad: list[str] = []
+    valid = re.compile(r"^#[A-Za-z_-][A-Za-z0-9_-]*$")
+    for path in _template_files():
+        for attr, value in _selector_attrs(_live_markup(path)):
+            v = value.strip()
+            if _EXTENDED.match(v) or "{{" in v or not v.startswith("#"):
+                continue
+            if not valid.match(v):
+                bad.append(f"{path.name}: {attr}=\"{v}\"")
+
+    assert bad == [], "invalid static id selectors:\n  " + "\n  ".join(bad)
+
+
+def test_attribute_form_targets_are_quoted():
+    """`[id=…]` must quote its value, or a dot/digit still breaks parsing."""
+    bad: list[str] = []
+    for path in _template_files():
+        for attr, value in _selector_attrs(_live_markup(path)):
+            v = value.strip()
+            if not v.startswith("[id="):
+                continue
+            if not re.match(r"^\[id=['\"].*['\"]\]$", v):
+                bad.append(f"{path.name}: {attr}=\"{v}\"")
+
+    assert bad == [], "unquoted attribute selectors:\n  " + "\n  ".join(bad)
+
+
+def test_revealed_trigger_is_never_combined_with_another_event():
+    """`hx-trigger="revealed, …"` can never fire.
+
+    htmx's reveal poller collects elements with an exact attribute match:
+
+        querySelectorAll("[hx-trigger='revealed'],[data-hx-trigger='revealed']")
+
+    so any combined spec is invisible to it. htmx's own infinite-scroll recipe
+    uses a bare `revealed` and never combines it. This project drives scrolling
+    from its own IntersectionObserver in app.js instead — see rec_page.html.
+    """
+    offenders: list[str] = []
+    for path in _template_files():
+        for m in re.finditer(r'hx-trigger\s*=\s*"([^"]*)"', _live_markup(path)):
+            spec = m.group(1)
+            if "revealed" in spec and "," in spec:
+                offenders.append(f"{path.name}: hx-trigger=\"{spec}\"")
+
+    assert offenders == [], (
+        "`revealed` cannot be combined with another trigger:\n  "
+        + "\n  ".join(offenders)
+    )
+
+
+def test_every_hx_target_id_has_a_matching_element_somewhere():
+    """Catch targets pointing at ids no template ever renders.
+
+    Only checks static ids — variable ones are resolved at request time and are
+    covered dynamically by the browser suite.
+    """
+    all_text = "\n".join(_live_markup(p) for p in _template_files())
+    rendered_ids = set(re.findall(r'id="([A-Za-z_-][A-Za-z0-9_-]*)"', all_text))
+
+    missing: list[str] = []
+    for path in _template_files():
+        for attr, value in _selector_attrs(_live_markup(path)):
+            v = value.strip()
+            if _EXTENDED.match(v) or "{{" in v or not v.startswith("#"):
+                continue
+            if v[1:] not in rendered_ids:
+                missing.append(f"{path.name}: {attr}=\"{v}\"")
+
+    assert missing == [], (
+        "hx-target points at an id no template renders:\n  " + "\n  ".join(missing)
+    )