phase-7: motion, an installable app, and a capture that survives no signal

GSAP carries the counter roll-ups, the bandeja card physics, the dialog
transitions and the three success moments FLOWS.md allows. Every one of
them checks prefers-reduced-motion first and does nothing when it is set.

boneyard and canvas-ui are not what SPEC.md's stack table says they are:
on npm the names belong to two abandoned projects that do neither job.
The skeletons were already ours; the two canvas spots are now sixty lines
each with no dependency. DECISIONS.md records the substitution.

The app installs, keeps a scan taken with no network in IndexedDB and
sends it when there is one, falls back to a page that explains itself,
and can push a deadline notice. Reading the log of what is queued is the
source of truth, so the notice clears when the capture actually lands.

The CSP now allows scripts by per-request nonce rather than by
'unsafe-inline'. That forced /offline to render per request: a
prerendered page carries a build-time nonce no live policy matches, so
its scripts were blocked and it never hydrated.

Two crashes fixed on the way. web-push throws on a VAPID subject that is
not https: or mailto:, and the code handed it APP_PUBLIC_URL, so any
machine with push keys died at boot; a misconfigured optional channel now
switches itself off and says why. And a subscription the push service
answers 410 for is deleted rather than retried forever.

Lighthouse on the production build: accessibility 100, best practices 96,
SEO 100, performance 73. The performance number is not trustworthy on
this machine and DECISIONS.md says why; total blocking time did fall from
17.6s to 1.7s once the hero canvas stopped drawing at full resolution
every frame and the landing page stopped importing GSAP.

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

apps/web/app/[locale]/(app)/escanear/scan-screen.tsx

@@ -11,6 +11,7 @@ import { Skeleton } from '@/components/ui/skeleton';
 import { Link, useRouter } from '@/i18n/navigation';
 import { useT } from '@/i18n/t';
 import { api } from '@/lib/api';
+import { enqueueCapture, listQueue, subscribeToQueue } from '@/lib/offline-queue';
 import { captureFrame, decodeQr, decodeQrFromVideo } from '@/lib/qr';
 import { cn } from '@/lib/utils';
 
@@ -35,6 +36,16 @@ export function ScanScreen({ locale }: { locale: string }) {
   const [showNoQrHint, setShowNoQrHint] = useState(false);
   const [torchOn, setTorchOn] = useState(false);
   const [outcome, setOutcome] = useState<Outcome | null>(null);
+  // Whether anything of this reader's is still waiting to be sent. It follows the queue
+  // rather than being set once, so the notice goes away when the capture actually lands.
+  const [queued, setQueued] = useState(false);
+
+  useEffect(() => {
+    const check = () => void listQueue().then((items) => setQueued(items.length > 0));
+    const unsubscribe = subscribeToQueue(check);
+    void Promise.resolve().then(check);
+    return unsubscribe;
+  }, []);
 
   const upload = useMutation({
     mutationFn: async (input: { file: File; qrPayload: string | null }) => {
@@ -54,6 +65,16 @@ export function ScanScreen({ locale }: { locale: string }) {
   const submit = useCallback(
     (file: File, qrPayload: string | null) => {
       if (busy.current) return;
+
+      /**
+       * Offline, the capture is kept rather than lost (FLOWS.md B2). The chip in the shell
+       * sends it the moment there is a connection, so this screen can say so and move on.
+       */
+      if (!navigator.onLine) {
+        void enqueueCapture(file, qrPayload);
+        return;
+      }
+
       busy.current = true;
       upload.mutate({ file, qrPayload }, { onSettled: () => (busy.current = false) });
     },
@@ -200,6 +221,12 @@ export function ScanScreen({ locale }: { locale: string }) {
         </Card>
       ) : null}
 
+      {queued ? (
+        <p role="status" className="text-center text-sm text-[var(--text-muted)]">
+          {t('offline.queued')}
+        </p>
+      ) : null}
+
       {upload.isError ? (
         <p role="alert" className="text-center text-sm text-overdue">
           {t('common.error.generic')}