feat: production-readiness pass

- Migrate login page to atelier design system (editorial modal style)
- Polish root error.tsx, not-found.tsx, loading.tsx with atelier design
- Add JSON-LD structured data: SoftwareApplication + LocalBusiness
- Fix next.config.ts outputFileTracingRoot absolute path warning
- Add force-dynamic to protected-example (uses cookies)
- Add proper type for stops page (replace : any)
- Fix unescaped quotes in StopTableClient
- Fix no-explicit-any in db-schema route
- Clean up console.logs in admin-permissions
- Fix inline any in admin/stops page
- Update OG image references to existing og-default.svg

src/app/loading.tsx

@@ -1,8 +1,8 @@
 import type { Metadata } from "next";
 
 export const metadata: Metadata = {
-  title: "Loading Route Commerce...",
-  description: "Loading...",
+  title: "Loading — Route Commerce",
+  description: "Loading content from Route Commerce",
   robots: {
     index: false,
     follow: false,
@@ -11,43 +11,80 @@ export const metadata: Metadata = {
 
 export default function Loading() {
   return (
-    <div className="min-h-screen flex items-center justify-center relative overflow-hidden" style={{ backgroundColor: "#faf8f5" }}>
-      {/* Subtle loading animation */}
-      <div className="flex flex-col items-center gap-6">
-        <div 
-          className="w-16 h-16 rounded-2xl flex items-center justify-center animate-pulse"
-          style={{ 
-            background: "linear-gradient(135deg, #1a4d2e 0%, #166534 100%)",
-            boxShadow: "0 8px 32px rgba(26, 77, 46, 0.3)"
-          }}
-          aria-label="Loading"
-          role="status"
-        >
-          <svg className="w-8 h-8 text-white animate-pulse" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
-            <path strokeLinecap="round" strokeLinejoin="round" d="M13 2L4.5 13.5H11.5L10.5 22L19 10.5H12L13 2Z" />
-          </svg>
+    <main
+      className="atelier-canvas relative min-h-screen flex items-center justify-center overflow-hidden"
+      role="status"
+      aria-live="polite"
+      aria-label="Loading content"
+    >
+      <div className="atelier-grain" aria-hidden="true" />
+
+      {/* Subtle ambient glow */}
+      <div className="pointer-events-none absolute inset-0 overflow-hidden" aria-hidden="true">
+        <div
+          className="absolute -top-32 -right-32 w-[28rem] h-[28rem] rounded-full opacity-25"
+          style={{ background: "radial-gradient(circle at 30% 30%, rgba(34, 78, 47, 0.18) 0%, transparent 70%)", filter: "blur(48px)" }}
+        />
+        <div
+          className="absolute -bottom-48 -left-48 w-[36rem] h-[36rem] rounded-full opacity-20"
+          style={{ background: "radial-gradient(circle at 70% 70%, rgba(202, 138, 4, 0.16) 0%, transparent 70%)", filter: "blur(60px)" }}
+        />
+      </div>
+
+      <div className="relative z-10 flex flex-col items-center gap-7 atelier-enter">
+        <div className="atelier-section-num">Loading</div>
+
+        {/* Animated editorial mark */}
+        <div className="relative">
+          <div
+            className="w-16 h-16 rounded-2xl flex items-center justify-center"
+            style={{
+              background: "linear-gradient(135deg, #14532D 0%, #1F6B3E 50%, #14532D 100%)",
+              boxShadow: "0 10px 28px -6px rgba(20, 83, 45, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.12)",
+              animation: "atelier-pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite",
+            }}
+            aria-hidden="true"
+          >
+            <svg className="w-8 h-8 text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={1.5}>
+              <path strokeLinecap="round" strokeLinejoin="round" d="M13 2L4.5 13.5H11.5L10.5 22L19 10.5H12L13 2Z" />
+            </svg>
+          </div>
         </div>
+
         <div className="text-center">
-          <p className="text-lg font-semibold text-stone-700" style={{ fontFamily: "'Plus Jakarta Sans', system-ui, sans-serif" }}>
-            Loading
+          <p
+            className="atelier-title text-2xl"
+          >
+            Preparing your <span className="atelier-italic text-[#786B53]">harvest</span>
           </p>
-          <p className="text-sm text-stone-500 mt-1">Please wait...</p>
+          <p className="text-sm text-stone-500 mt-1.5">Just a moment…</p>
+        </div>
+
+        {/* Progress dots */}
+        <div className="flex items-center gap-1.5" aria-hidden="true">
+          {[0, 1, 2].map((i) => (
+            <div
+              key={i}
+              className="w-1.5 h-1.5 rounded-full bg-[#14532D]"
+              style={{
+                animation: "atelier-dot 1.4s ease-in-out infinite",
+                animationDelay: `${i * 0.16}s`,
+              }}
+            />
+          ))}
         </div>
       </div>
-      
-      {/* Decorative elements */}
-      <div className="absolute inset-0 pointer-events-none overflow-hidden">
-        <div 
-          className="absolute -top-32 -right-32 w-96 h-96 rounded-full opacity-10"
-          style={{ background: "radial-gradient(circle at 30% 30%, #c97a3e20 0%, transparent 70%)", filter: "blur(40px)" }}
-          aria-hidden="true"
-        />
-        <div 
-          className="absolute -bottom-48 -left-48 w-[600px] h-[600px] rounded-full opacity-10"
-          style={{ background: "radial-gradient(circle at 70% 70%, #6b8f7130 0%, transparent 70%)", filter: "blur(60px)" }}
-          aria-hidden="true"
-        />
-      </div>
-    </div>
+
+      <style>{`
+        @keyframes atelier-pulse {
+          0%, 100% { transform: scale(1); opacity: 1; }
+          50%      { transform: scale(1.05); opacity: 0.85; }
+        }
+        @keyframes atelier-dot {
+          0%, 80%, 100% { transform: scale(0.6); opacity: 0.4; }
+          40%           { transform: scale(1);   opacity: 1; }
+        }
+      `}</style>
+    </main>
   );
-}
+}