From 7a1df1da252de94fd99ef95d575d80e381155495 Mon Sep 17 00:00:00 2001
From: sbc1-code <207095575+sbc1-code@users.noreply.github.com>
Date: Wed, 30 Sep 2026 14:57:42 -0700
Subject: [PATCH] fix: improve mobile readability and accessibility across
 BorderPulse

---
 scripts/prerender.mjs                         |  2 +-
 src/Layout.jsx                                | 32 ++++----
 src/components/blog/BestTimeChart.jsx         | 17 +++--
 .../dashboard/BorderCrossingCard.jsx          | 74 ++++++++++---------
 src/components/dashboard/BorderLine.jsx       |  4 +-
 src/components/dashboard/CommuterSnapshot.jsx | 22 +++---
 .../dashboard/ExchangeRateWidget.jsx          |  6 +-
 src/components/dashboard/LaneRow.jsx          |  2 +-
 src/components/dashboard/StatsOverview.jsx    |  8 +-
 src/index.css                                 | 24 +++++-
 src/pages/BestTime.jsx                        | 15 ++--
 src/pages/Compare.jsx                         | 12 +--
 src/pages/CrossingDetail.jsx                  | 21 +++---
 src/pages/Dashboard.jsx                       | 20 ++---
 src/pages/Embed.jsx                           | 24 +++---
 src/pages/Privacy.jsx                         | 13 ++--
 src/pages/WalkOrDrive.jsx                     |  4 +-
 17 files changed, 165 insertions(+), 135 deletions(-)

diff --git a/scripts/prerender.mjs b/scripts/prerender.mjs
index 25c1c2ac..333813fb 100644
--- a/scripts/prerender.mjs
+++ b/scripts/prerender.mjs
@@ -446,7 +446,7 @@ function renderBlogPostBody(post, author) {
   const authorName = author?.name || post.author || '';
   const byline = authorName ? `<p>${esc(authorName)} · ${esc(post.date)}</p>` : '';
   return `
-<article lang="${lang}" aria-hidden="true" style="position:absolute;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden">
+<article lang="${lang}" aria-hidden="true" inert style="position:absolute;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden">
   <header>
     <h1>${esc(post.title)}</h1>
     <p>${esc(post.description || '')}</p>
diff --git a/src/Layout.jsx b/src/Layout.jsx
index aabbf356..50e34d1b 100644
--- a/src/Layout.jsx
+++ b/src/Layout.jsx
@@ -90,7 +90,7 @@ export default function Layout({ children }) {
       {/* Mobile header */}
       <header className={`lg:hidden w-screen max-w-full ${isDark ? 'bg-gray-900/80 border-gray-800' : 'bg-white/80 border-slate-200'} backdrop-blur-md border-b sticky top-0 z-40`}>
         <div className="flex items-center justify-between px-4 py-3">
-          <Link to="/" className="flex min-w-0 items-center gap-2">
+          <Link to="/" aria-label="Border Pulse home" className="flex min-h-11 min-w-11 items-center gap-2 rounded-md">
             <BorderPulseLogo size={32} />
             <span className={`hidden truncate text-base font-bold sm:inline sm:text-lg ${isDark ? 'text-white' : 'text-slate-900'}`}>
               Border Pulse
@@ -98,36 +98,37 @@ export default function Layout({ children }) {
           </Link>
           <div className="flex shrink-0 items-center gap-1">
             <div className={`flex items-center ${isDark ? 'bg-gray-800 border-gray-700' : 'bg-white border-slate-200'} border rounded-lg p-0.5`}>
-              <Button variant={language === 'en' ? 'default' : 'ghost'} size="sm" onClick={() => changeLanguage('en')} className="text-xs px-2 h-9" aria-label="Switch to English">EN</Button>
-              <Button variant={language === 'es' ? 'default' : 'ghost'} size="sm" onClick={() => changeLanguage('es')} className="text-xs px-2 h-9" aria-label="Cambiar a español">ES</Button>
+              <Button variant={language === 'en' ? 'default' : 'ghost'} size="sm" onClick={() => changeLanguage('en')} className="min-h-11 min-w-11 px-2 text-sm" aria-label="Switch to English" aria-pressed={language === 'en'}>EN</Button>
+              <Button variant={language === 'es' ? 'default' : 'ghost'} size="sm" onClick={() => changeLanguage('es')} className="min-h-11 min-w-11 px-2 text-sm" aria-label="Cambiar a español" aria-pressed={language === 'es'}>ES</Button>
             </div>
-            <Button variant="ghost" size="icon" onClick={toggleTheme} className="rounded-full tap-44" aria-label={isDark ? 'Switch to light mode' : 'Switch to dark mode'}>
+            <Button variant="ghost" size="icon" onClick={toggleTheme} className="min-h-11 min-w-11 rounded-full" aria-label={isDark ? 'Switch to light mode' : 'Switch to dark mode'}>
               {isDark ? <Sun className="w-4 h-4" /> : <Moon className="w-4 h-4" />}
             </Button>
-            <Button variant="ghost" size="icon" onClick={() => setMobileOpen((v) => !v)} className="rounded-full tap-44" aria-label={mobileOpen ? 'Close menu' : 'Open menu'} aria-expanded={mobileOpen}>
+            <Button variant="ghost" size="icon" onClick={() => setMobileOpen((v) => !v)} className="min-h-11 min-w-11 rounded-full" aria-label={mobileOpen ? 'Close menu' : 'Open menu'} aria-expanded={mobileOpen}>
               {mobileOpen ? <X className="w-5 h-5" /> : <Menu className="w-5 h-5" />}
             </Button>
           </div>
         </div>
         {mobileOpen && (
-          <div className={`border-t ${isDark ? 'border-gray-800 bg-gray-900' : 'border-slate-200 bg-white'} px-4 py-2 space-y-1`}>
+          <nav id="mobile-navigation" aria-label={language === 'en' ? 'Main navigation' : 'Navegación principal'} className={`border-t ${isDark ? 'border-gray-800 bg-gray-900' : 'border-slate-200 bg-white'} px-4 py-2 space-y-1`}>
             {nav.map((item) => (
               <Link
                 key={item.name}
                 to={item.href}
                 onClick={() => setMobileOpen(false)}
-                className={`flex items-center gap-3 px-3 py-2 rounded-lg ${item.current ? isDark ? 'bg-emerald-900/30 text-emerald-300' : 'bg-emerald-50 text-emerald-800' : isDark ? 'text-slate-300 hover:bg-gray-800' : 'text-slate-700 hover:bg-slate-100'}`}
+                aria-current={item.current ? 'page' : undefined}
+                className={`flex min-h-11 items-center gap-3 px-3 py-2 rounded-lg ${item.current ? isDark ? 'bg-emerald-900/30 text-emerald-300' : 'bg-emerald-50 text-emerald-800' : isDark ? 'text-slate-300 hover:bg-gray-800' : 'text-slate-700 hover:bg-slate-100'}`}
               >
                 <item.icon className="w-5 h-5" />
                 {item.name}
               </Link>
             ))}
-          </div>
+          </nav>
         )}
       </header>
 
       <div className="lg:flex min-h-screen">
-        <aside className={`hidden lg:flex w-60 shrink-0 ${sidebarClasses} backdrop-blur-md border-r flex-col`}>
+        <aside aria-label={language === 'en' ? 'Site navigation' : 'Navegación del sitio'} className={`hidden lg:flex w-60 shrink-0 ${sidebarClasses} backdrop-blur-md border-r flex-col`}>
           <div className={`p-5 border-b ${isDark ? 'border-gray-800' : 'border-slate-200'}`}>
             <Link to="/" className="flex items-center gap-3">
               <BorderPulseLogo size={40} />
@@ -150,20 +151,21 @@ export default function Layout({ children }) {
                 on tall pages. */}
             <div className="mt-3 flex items-center gap-2">
               <div className={`flex items-center ${isDark ? 'bg-gray-800 border-gray-700' : 'bg-white border-slate-200'} border rounded-lg p-0.5`}>
-                <Button variant={language === 'en' ? 'default' : 'ghost'} size="sm" onClick={() => changeLanguage('en')} className="text-xs px-2 h-9" aria-label="Switch to English">EN</Button>
-                <Button variant={language === 'es' ? 'default' : 'ghost'} size="sm" onClick={() => changeLanguage('es')} className="text-xs px-2 h-9" aria-label="Cambiar a español">ES</Button>
+                <Button variant={language === 'en' ? 'default' : 'ghost'} size="sm" onClick={() => changeLanguage('en')} className="min-h-11 min-w-11 px-2 text-sm" aria-label="Switch to English" aria-pressed={language === 'en'}>EN</Button>
+                <Button variant={language === 'es' ? 'default' : 'ghost'} size="sm" onClick={() => changeLanguage('es')} className="min-h-11 min-w-11 px-2 text-sm" aria-label="Cambiar a español" aria-pressed={language === 'es'}>ES</Button>
               </div>
-              <Button variant="ghost" size="icon" onClick={toggleTheme} className="rounded-full tap-44" aria-label={isDark ? 'Switch to light mode' : 'Switch to dark mode'}>
+              <Button variant="ghost" size="icon" onClick={toggleTheme} className="min-h-11 min-w-11 rounded-full" aria-label={isDark ? 'Switch to light mode' : 'Switch to dark mode'}>
                 {isDark ? <Sun className="w-4 h-4" /> : <Moon className="w-4 h-4" />}
               </Button>
             </div>
           </div>
-          <nav className="flex-1 p-3 space-y-1">
+          <nav aria-label={language === 'en' ? 'Main navigation' : 'Navegación principal'} className="flex-1 p-3 space-y-1">
             {nav.map((item) => (
               <Link
                 key={item.name}
                 to={item.href}
-                className={`flex items-center gap-3 px-3 py-2 rounded-lg text-sm font-medium ${item.current
+                aria-current={item.current ? 'page' : undefined}
+                className={`flex min-h-11 items-center gap-3 px-3 py-2 rounded-lg text-sm font-medium ${item.current
                   ? isDark ? 'bg-emerald-900/30 text-emerald-300' : 'bg-emerald-50 text-emerald-800'
                   : isDark ? 'text-slate-300 hover:bg-gray-800/60' : 'text-slate-700 hover:bg-slate-100'}`}
               >
@@ -178,7 +180,7 @@ export default function Layout({ children }) {
 
       {/* Footer (all viewports) */}
       <footer className={`border-t ${isDark ? 'border-gray-800 bg-gray-900/60' : 'border-slate-200 bg-white/60'} backdrop-blur-sm`}>
-        <div className="max-w-[1600px] mx-auto px-4 py-3 flex flex-col sm:flex-row items-center justify-between gap-2 text-[11px] text-slate-500 dark:text-slate-400">
+        <div className="max-w-[1600px] mx-auto px-4 py-3 flex flex-col sm:flex-row items-center justify-between gap-2 text-xs text-slate-600 dark:text-slate-300">
           <div className="flex items-center gap-2 flex-wrap justify-center sm:justify-start">
             <span>
               {language === 'en' ? 'Data: U.S. Customs and Border Protection' : 'Datos: Aduanas y Protección Fronteriza EE.UU.'}
diff --git a/src/components/blog/BestTimeChart.jsx b/src/components/blog/BestTimeChart.jsx
index 27b35ec9..5c29a946 100644
--- a/src/components/blog/BestTimeChart.jsx
+++ b/src/components/blog/BestTimeChart.jsx
@@ -93,20 +93,21 @@ export default function BestTimeChart({ slug, title }) {
   }
 
   return (
-    <figure className="not-prose my-6">
+    <figure className="not-prose my-6 w-full min-w-0 max-w-[calc(100vw-2rem)]">
       {title && (
         <figcaption className="text-xs uppercase tracking-wide text-slate-500 mb-2">
           {title}
         </figcaption>
       )}
-      <div className="overflow-x-auto rounded border border-slate-200 dark:border-gray-700 bg-white dark:bg-gray-900 p-3">
-        <table className="text-[10px] tabular-nums">
+      <div className="w-full min-w-0 max-w-full overflow-x-auto rounded border border-slate-200 dark:border-gray-700 bg-white dark:bg-gray-900 p-3" role="region" aria-label={title || t.caption} tabIndex={0} style={{ contain: 'paint' }}>
+        <table className="text-xs tabular-nums">
+          <caption className="sr-only">{t.caption}</caption>
           <thead>
             <tr>
-              <th className="w-10"></th>
+              <th scope="col" className="w-10 text-slate-700 dark:text-slate-200">{lang === 'es' ? 'Día' : 'Day'}</th>
               {Array.from({ length: 24 }, (_, h) => (
-                <th key={h} className="px-0.5 py-1 text-slate-500 font-normal text-center">
-                  {h % 2 === 0 ? formatHourCompact(h) : ''}
+                <th key={h} scope="col" className="px-0.5 py-1 text-slate-700 dark:text-slate-200 font-medium text-center">
+                  {formatHourCompact(h)}
                 </th>
               ))}
             </tr>
@@ -114,15 +115,17 @@ export default function BestTimeChart({ slug, title }) {
           <tbody>
             {days.map((day, di) => (
               <tr key={day}>
-                <th className="pr-2 py-0.5 text-right text-slate-500 font-normal">{day}</th>
+                <th scope="row" className="pr-2 py-0.5 text-right text-slate-700 dark:text-slate-200 font-medium">{day}</th>
                 {Array.from({ length: 24 }, (_, h) => {
                   const v = grid[`${di}-${h}`];
                   return (
                     <td key={h} className="px-0.5 py-0.5">
+                      <span className="sr-only">{v == null ? `${day} ${formatHour12(h)}: ${t.legendNoData}` : t.cell(day, formatHour12(h), v)}</span>
                       <div
                         className="w-5 h-5 rounded-sm"
                         style={{ background: colorFor(v) }}
                         title={v == null ? '—' : t.cell(days[di], formatHour12(h), v)}
+                        aria-hidden="true"
                       />
                     </td>
                   );
diff --git a/src/components/dashboard/BorderCrossingCard.jsx b/src/components/dashboard/BorderCrossingCard.jsx
index 639f8a53..f15cbe6f 100644
--- a/src/components/dashboard/BorderCrossingCard.jsx
+++ b/src/components/dashboard/BorderCrossingCard.jsx
@@ -9,7 +9,7 @@ import {
   Clock, MapPin, TrendingUp, TrendingDown, Minus, AlertTriangle,
   Car, User, Truck, Star, MoreHorizontal,
 } from 'lucide-react';
-import { motion, AnimatePresence } from 'framer-motion';
+import { motion, AnimatePresence, useReducedMotion } from 'framer-motion';
 import {
   DropdownMenu,
   DropdownMenuContent,
@@ -134,6 +134,7 @@ export default function BorderCrossingCard({
 }) {
   const [showLanes, setShowLanes] = useState(false);
   const [aggregate, setAggregate] = useState(null);
+  const reduceMotion = useReducedMotion();
 
   const cardSlug = slug || crossing.slug || null;
 
@@ -197,7 +198,7 @@ export default function BorderCrossingCard({
   }, [wait, previousWait]);
 
   const TrendIcon = trend === 'up' ? TrendingUp : trend === 'down' ? TrendingDown : Minus;
-  const trendColor = trend === 'up' ? 'text-rose-500' : trend === 'down' ? 'text-emerald-500' : 'text-slate-400';
+  const trendColor = trend === 'up' ? 'text-rose-800' : trend === 'down' ? 'text-emerald-800' : 'text-slate-700';
   const waitFillPct = wait == null ? 0 : Math.min(100, Math.max(8, Math.round((wait / 90) * 100)));
   const trendLabel = trend === 'up'
     ? (language === 'en' ? 'Rising' : 'Subiendo')
@@ -254,30 +255,30 @@ export default function BorderCrossingCard({
 
   return (
     <motion.div
-      initial={{ opacity: 0, y: 12 }}
+      initial={reduceMotion ? false : { opacity: 0, y: 12 }}
       animate={{ opacity: 1, y: 0 }}
-      transition={{ delay: Math.min(index * 0.02, 0.3) }}
+      transition={reduceMotion ? { duration: 0 } : { delay: Math.min(index * 0.02, 0.3) }}
     >
-      <Card className="h-full flex flex-col overflow-hidden rounded-lg border-slate-200/90 bg-white shadow-sm transition-all duration-200 hover:-translate-y-0.5 hover:shadow-lg dark:border-slate-800 dark:bg-slate-950">
+      <Card className="h-full flex flex-col overflow-hidden rounded-lg border-slate-200/90 bg-white shadow-sm transition-all duration-200 hover:-translate-y-0.5 hover:shadow-lg dark:border-slate-700 dark:bg-slate-950">
         <div className={`h-1.5 ${s.bar}`} />
         <CardContent className="p-3 flex-1 flex flex-col">
           {/* Header */}
           <div className="flex items-start justify-between gap-2 mb-1.5">
             <div className="min-w-0 flex-1">
               <div className="flex items-center gap-1.5 mb-0.5">
-                <h3 className="text-sm font-semibold text-slate-900 truncate" title={crossing.name}>
+                <h2 className="min-w-0 text-base font-semibold text-slate-900 dark:text-slate-100 truncate" title={crossing.name}>
                   {cardSlug ? (
-                    <Link to={`/crossing/${cardSlug}/`} className="hover:underline" onClick={() => track('crossing-open', { slug: cardSlug, source: 'card', direction: selectedDirection })}>
+                    <Link to={`/crossing/${cardSlug}/`} className="rounded-sm hover:underline focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-emerald-500" onClick={() => track('crossing-open', { slug: cardSlug, source: 'card', direction: selectedDirection })}>
                       {crossing.name || crossing.port_name}
                     </Link>
                   ) : (
                     crossing.name || crossing.port_name
                   )}
-                </h3>
+                </h2>
                 <span className="text-base leading-none">{isSouthbound ? '🇲🇽' : '🇺🇸'}</span>
               </div>
-              <div className="flex items-center gap-1 text-[11px] text-slate-500">
-                <MapPin className="w-3 h-3 flex-shrink-0" />
+              <div className="flex items-center gap-1 text-xs text-slate-600 dark:text-slate-300">
+                <MapPin className="w-3.5 h-3.5 flex-shrink-0" />
                 <span className="truncate">
                   {isSouthbound
                     ? (language === 'en' ? 'To Mexico' : 'Hacia México')
@@ -285,14 +286,14 @@ export default function BorderCrossingCard({
                 </span>
               </div>
               <div className="flex flex-wrap gap-1 mt-1.5">
-                <Badge variant="outline" className={`text-[10px] font-medium whitespace-nowrap py-0 ${portStatusStyle.badge}`}>
+                <Badge variant="outline" className={`text-xs font-medium whitespace-nowrap py-0.5 ${portStatusStyle.badge}`}>
                   {portStatusStyle.label[language] || portStatusStyle.label.en}
                 </Badge>
-                <Badge variant="outline" className="text-[10px] font-medium whitespace-nowrap py-0 bg-slate-50 text-slate-700 border-slate-200">
+                <Badge variant="outline" className="text-xs font-medium whitespace-nowrap py-0.5 bg-slate-50 text-slate-700 border-slate-200">
                   {sourceLabel}
                 </Badge>
                 {hasAdvisory && (
-                  <Badge variant="outline" className="text-[10px] font-medium whitespace-nowrap py-0 bg-amber-50 text-amber-700 border-amber-200">
+                  <Badge variant="outline" className="text-xs font-medium whitespace-nowrap py-0.5 bg-amber-50 text-amber-700 border-amber-200">
                     {advisoryLabel(advisoryType, language)}
                   </Badge>
                 )}
@@ -307,13 +308,13 @@ export default function BorderCrossingCard({
                 aria-label={isFavorite
                   ? (language === 'en' ? 'Remove from favorites' : 'Quitar de favoritos')
                   : (language === 'en' ? 'Add to favorites' : 'Agregar a favoritos')}
-                className="p-2.5 rounded-md hover:bg-slate-100 transition-colors"
+                className="flex h-11 w-11 items-center justify-center rounded-md text-slate-600 hover:bg-slate-100 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-emerald-500 dark:text-slate-200 dark:hover:bg-slate-800"
               >
                 <Star
                   className={`w-4 h-4 transition-colors ${
                     isFavorite
                       ? 'fill-amber-400 text-amber-400'
-                      : 'text-slate-300 hover:text-slate-400'
+                      : 'text-slate-600 dark:text-slate-300'
                   }`}
                 />
               </button>
@@ -321,9 +322,9 @@ export default function BorderCrossingCard({
                 <DropdownMenuTrigger asChild>
                   <button
                     aria-label={language === 'en' ? 'More options' : 'Más opciones'}
-                    className="p-2.5 rounded-md hover:bg-slate-100 transition-colors"
+                    className="flex h-11 w-11 items-center justify-center rounded-md text-slate-600 hover:bg-slate-100 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-emerald-500 dark:text-slate-200 dark:hover:bg-slate-800"
                   >
-                    <MoreHorizontal className="w-4 h-4 text-slate-400" />
+                    <MoreHorizontal className="w-5 h-5" />
                   </button>
                 </DropdownMenuTrigger>
                 <DropdownMenuContent align="end" className="w-44">
@@ -361,14 +362,14 @@ export default function BorderCrossingCard({
           <div className={`mt-2.5 rounded-lg border p-3 ${s.meter}`}>
             <div className="flex items-end justify-between gap-3">
               <div className="min-w-0">
-                <div className="text-[10px] font-semibold uppercase tracking-wide text-slate-500">
+                <div className="text-xs font-semibold uppercase tracking-wide text-slate-700">
                   {waitMetaLabel}
                 </div>
                 <div className="mt-1 flex items-baseline gap-2">
                   <span className={`text-4xl font-bold tabular-nums leading-none ${s.waitText}`}>
                     {wait == null ? '—' : wait}
                   </span>
-                  <span className="text-xs font-medium text-slate-500">
+                  <span className="text-sm font-medium text-slate-700">
                     {wait == null
                       ? (language === 'en'
                         ? (isSouthbound ? 'no estimate' : 'not reported')
@@ -378,11 +379,11 @@ export default function BorderCrossingCard({
                 </div>
               </div>
               <div className="flex flex-col items-end gap-1 text-right">
-                <Badge variant="outline" className={`text-[11px] font-semibold whitespace-nowrap py-0 ${s.badge}`}>
+                <Badge variant="outline" className={`text-xs font-semibold whitespace-nowrap py-0.5 ${s.badge}`}>
                   {s.label[language] || s.label.en}
                 </Badge>
                 {wait != null && (
-                  <span className={`inline-flex items-center gap-1 text-[10px] font-medium ${trendColor}`}>
+                  <span className={`inline-flex items-center gap-1 text-xs font-medium ${trendColor}`}>
                     <TrendIcon className="w-3 h-3" />
                     {trendLabel}
                   </span>
@@ -395,7 +396,7 @@ export default function BorderCrossingCard({
                 style={{ width: `${waitFillPct}%` }}
               />
             </div>
-            <div className="mt-2 flex flex-wrap items-center gap-x-2 gap-y-1 text-[11px] tabular-nums">
+            <div className="mt-2 flex flex-wrap items-center gap-x-2 gap-y-1 text-xs tabular-nums">
               {typicalDelta && (
                 <>
                   {typicalDelta.delta > 15 && (
@@ -406,14 +407,14 @@ export default function BorderCrossingCard({
                     </span>
                   )}
                   {typicalDelta.delta < -15 && (
-                    <span className="font-medium text-emerald-600">
+                    <span className="font-medium text-emerald-900">
                       {language === 'en'
                         ? `-${Math.abs(typicalDelta.delta)} min vs. typical`
                         : `-${Math.abs(typicalDelta.delta)} min vs. lo normal`}
                     </span>
                   )}
                   {typicalDelta.delta >= -15 && typicalDelta.delta <= 15 && (
-                    <span className="text-slate-600">
+                    <span className="text-slate-700">
                       {language === 'en' ? 'About typical' : 'Cerca de lo normal'}
                     </span>
                   )}
@@ -423,7 +424,7 @@ export default function BorderCrossingCard({
               {showBestTimePill && cardSlug && (
                 <Link
                   to={`/best-time/${cardSlug}/`}
-                  className="inline-flex items-center gap-1 rounded-full border border-emerald-200 bg-white/70 px-2 py-0.5 text-[10px] font-semibold text-emerald-800 transition-colors hover:bg-white dark:border-emerald-900 dark:bg-emerald-950/40 dark:text-emerald-300 dark:hover:bg-emerald-950/60"
+                  className="inline-flex min-h-11 items-center gap-1 rounded-full border border-emerald-200 bg-white px-3 py-1 text-xs font-semibold text-emerald-800 transition-colors hover:bg-emerald-50 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-emerald-500 dark:border-emerald-700 dark:bg-emerald-950 dark:text-emerald-200 dark:hover:bg-emerald-900"
                   title={language === 'en'
                     ? `Lightest typical hour today opens the full hour-by-hour pattern`
                     : `Hora más ligera típica hoy abre el patrón hora por hora`}
@@ -436,12 +437,12 @@ export default function BorderCrossingCard({
             </div>
           </div>
 
-          <div className="flex items-center gap-1 text-[11px] text-slate-500 mt-2">
-            <Clock className="w-3 h-3" />
+          <div className="flex items-center gap-1 text-xs text-slate-600 dark:text-slate-300 mt-2">
+            <Clock className="w-3.5 h-3.5" />
             <span className="truncate">{hoursLabel}</span>
           </div>
           {advisoryText && (
-            <div className="mt-2 rounded-md border border-amber-200 bg-amber-50 px-2 py-1.5 text-[11px] text-amber-900">
+            <div className="mt-2 rounded-md border border-amber-200 bg-amber-50 px-2 py-2 text-xs text-amber-900">
               <span className="font-medium">{language === 'en' ? 'Advisory:' : 'Aviso:'}</span>{' '}
               {advisoryText}
             </div>
@@ -451,9 +452,10 @@ export default function BorderCrossingCard({
           <AnimatePresence>
             {showLanes && (
               <motion.div
-                initial={{ opacity: 0, height: 0 }}
+                initial={reduceMotion ? false : { opacity: 0, height: 0 }}
                 animate={{ opacity: 1, height: 'auto' }}
-                exit={{ opacity: 0, height: 0 }}
+                exit={reduceMotion ? { opacity: 1, height: 'auto' } : { opacity: 0, height: 0 }}
+                transition={reduceMotion ? { duration: 0 } : undefined}
                 className="overflow-hidden"
               >
                 {isSouthbound ? (
@@ -497,22 +499,22 @@ export default function BorderCrossingCard({
           </AnimatePresence>
 
           {/* Footer: live dot + updated + warning */}
-          <div className="mt-auto pt-1.5 flex items-center justify-between text-[10px] text-slate-500 border-t border-slate-100 mt-2">
+          <div className="mt-auto mt-2 flex flex-wrap items-center justify-between gap-x-2 gap-y-1 border-t border-slate-200 pt-2 text-xs text-slate-600 dark:border-slate-700 dark:text-slate-300">
             <div className="flex items-center gap-1.5">
               <span
-                className={`w-1.5 h-1.5 rounded-full ${
-                  freshness.state === FRESHNESS.FRESH ? `${s.dot} animate-pulse` : 'bg-slate-300'
+                className={`w-2 h-2 rounded-full ${
+                  freshness.state === FRESHNESS.FRESH ? `${s.dot} motion-safe:animate-pulse` : 'bg-slate-400'
                 }`}
               />
               <span className={freshness.state === FRESHNESS.STALE ? 'text-amber-700 dark:text-amber-400' : undefined}>
                 {liveLabel(freshness.state, freshness.age, language)}
               </span>
             </div>
-            <span className="text-slate-400 truncate">{formatUpdatedAt(updatedAt, language)}</span>
+            <span className="text-slate-600 dark:text-slate-300 tabular-nums">{formatUpdatedAt(updatedAt, language)}</span>
           </div>
           {isHigh && (
-            <div className="mt-1.5 flex items-center gap-1.5 rounded-md bg-rose-50 px-2 py-0.5 text-[10px] text-rose-700">
-              <AlertTriangle className="w-3 h-3 flex-shrink-0" />
+            <div className="mt-2 flex items-center gap-1.5 rounded-md bg-rose-50 px-2 py-1 text-xs text-rose-800">
+              <AlertTriangle className="w-3.5 h-3.5 flex-shrink-0" />
               {language === 'en' ? 'High wait time' : 'Tiempo de espera alto'}
             </div>
           )}
diff --git a/src/components/dashboard/BorderLine.jsx b/src/components/dashboard/BorderLine.jsx
index 0773de4a..d71a6855 100644
--- a/src/components/dashboard/BorderLine.jsx
+++ b/src/components/dashboard/BorderLine.jsx
@@ -167,7 +167,7 @@ export default function BorderLine({
     <svg
       viewBox={`0 0 ${W} ${H}`}
       className="bp-line-svg w-full"
-      role="img"
+      role="group"
       aria-labelledby="bp-line-title bp-line-desc"
       preserveAspectRatio="xMidYMid meet"
     >
@@ -308,7 +308,7 @@ export default function BorderLine({
     <svg
       viewBox={`0 0 ${MW} ${MH}`}
       className="bp-line-svg w-full"
-      role="img"
+      role="group"
       aria-labelledby="bp-line-title-m bp-line-desc-m"
       preserveAspectRatio="xMidYMid meet"
     >
diff --git a/src/components/dashboard/CommuterSnapshot.jsx b/src/components/dashboard/CommuterSnapshot.jsx
index 67b3d021..a45d6446 100644
--- a/src/components/dashboard/CommuterSnapshot.jsx
+++ b/src/components/dashboard/CommuterSnapshot.jsx
@@ -1,6 +1,6 @@
 import React, { useMemo } from 'react';
 import { Activity, AlertTriangle, Clock, MapPin, TrendingDown } from 'lucide-react';
-import { motion } from 'framer-motion';
+import { motion, useReducedMotion } from 'framer-motion';
 import { summarize } from '@/lib/trustState';
 import { getStatusForWait, getWaitMinutes } from '@/components/utils/crossingDirection';
 
@@ -42,17 +42,17 @@ function SnapshotMetric({ icon: Icon, label, value, detail, tone = 'slate' }) {
 
   return (
     <div className="min-w-0 border-l border-slate-200 pl-2.5 first:border-l-0 first:pl-0 dark:border-slate-800 sm:pl-3">
-      <div className="flex items-center gap-1 text-[10px] font-medium uppercase tracking-wide text-slate-500 dark:text-slate-400 sm:gap-1.5 sm:text-[11px]">
+      <div className="flex items-start gap-1 text-xs font-medium uppercase leading-tight tracking-wide text-slate-600 dark:text-slate-300 sm:gap-1.5">
         <span className={`inline-flex h-4 w-4 shrink-0 items-center justify-center rounded-md border sm:h-5 sm:w-5 ${toneClass}`}>
           <Icon className="h-2.5 w-2.5 sm:h-3 sm:w-3" />
         </span>
-        <span className="truncate">{label}</span>
+        <span>{label}</span>
       </div>
       <div className="mt-0.5 truncate text-base font-bold leading-tight text-slate-950 tabular-nums dark:text-white sm:mt-1 sm:text-lg">
         {value}
       </div>
       {detail && (
-        <div className="mt-0.5 truncate text-[10px] text-slate-500 dark:text-slate-400 sm:text-[11px]" title={detail}>
+        <div className="mt-0.5 line-clamp-2 text-xs text-slate-600 dark:text-slate-300" title={detail}>
           {detail}
         </div>
       )}
@@ -66,6 +66,7 @@ export default function CommuterSnapshot({
   language = 'en',
   regionLabel,
 }) {
+  const reduceMotion = useReducedMotion();
   const stats = useMemo(() => {
     const rows = (crossings || []).map((crossing) => ({
       crossing,
@@ -127,27 +128,28 @@ export default function CommuterSnapshot({
 
   return (
     <motion.section
-      initial={{ opacity: 0, y: 8 }}
+      initial={reduceMotion ? false : { opacity: 0, y: 8 }}
       animate={{ opacity: 1, y: 0 }}
+      transition={reduceMotion ? { duration: 0 } : undefined}
       className="mb-4 overflow-hidden rounded-lg border border-slate-200 bg-white shadow-sm dark:border-slate-800 dark:bg-slate-950"
       aria-label={language === 'en' ? 'Commuter snapshot' : 'Resumen para commuters'}
     >
       <div className="grid gap-0 lg:grid-cols-[1.1fr,2fr]">
         <div className="border-b border-slate-200 bg-slate-950 p-3 text-white sm:p-4 lg:border-b-0 lg:border-r lg:border-slate-800">
-          <div className={`inline-flex items-center gap-1.5 rounded-full border px-2 py-0.5 text-[11px] font-semibold ${tier.chip}`}>
+          <div className={`inline-flex items-center gap-1.5 rounded-full border px-2 py-0.5 text-xs font-semibold ${tier.chip}`}>
             <span className={`h-1.5 w-1.5 rounded-full ${tier.bar}`} />
             {tier.label[language] || tier.label.en}
           </div>
           <div className="mt-2.5 flex items-end justify-between gap-3">
             <div className="min-w-0">
-              <p className="text-[11px] uppercase tracking-wide text-slate-400">
+              <p className="text-xs uppercase tracking-wide text-slate-300">
                 {language === 'en' ? 'Median wait now' : 'Espera mediana ahora'}
               </p>
               <p className="mt-0.5 text-3xl font-bold leading-none tabular-nums sm:text-4xl">
                 {formatWait(stats.median)}
               </p>
             </div>
-            <div className="shrink-0 text-right text-[11px] leading-tight text-slate-400">
+            <div className="shrink-0 text-right text-xs leading-tight text-slate-300">
               <p className="truncate">{scopeLabel}</p>
               <p>{directionLabel}</p>
             </div>
@@ -157,7 +159,7 @@ export default function CommuterSnapshot({
             <div className="bg-amber-500" style={{ width: `${moderatePct}%` }} />
             <div className="bg-rose-500" style={{ width: `${heavyPct}%` }} />
           </div>
-          <div className="mt-2 flex items-center justify-between text-[10px] text-slate-400">
+          <div className="mt-2 flex items-center justify-between text-xs text-slate-300">
             <span>{stats.reportingCount}/{stats.total} {language === 'en' ? 'reporting' : 'reportando'}</span>
             <span>{stats.counts.good} / {stats.counts.moderate} / {stats.counts.heavy}</span>
           </div>
@@ -196,7 +198,7 @@ export default function CommuterSnapshot({
           />
         </div>
       </div>
-      <div className="flex flex-wrap items-center gap-x-4 gap-y-1 border-t border-slate-200 bg-slate-50 px-4 py-2 text-[11px] text-slate-500 dark:border-slate-800 dark:bg-slate-900/60 dark:text-slate-400">
+      <div className="flex flex-wrap items-center gap-x-4 gap-y-1 border-t border-slate-200 bg-slate-50 px-4 py-2 text-xs text-slate-600 dark:border-slate-800 dark:bg-slate-900/60 dark:text-slate-300">
         <span className="inline-flex items-center gap-1">
           <Activity className="h-3 w-3 text-emerald-500" />
           {language === 'en' ? 'Quick under 15m' : 'Rápido bajo 15m'}
diff --git a/src/components/dashboard/ExchangeRateWidget.jsx b/src/components/dashboard/ExchangeRateWidget.jsx
index 2d9858d1..f7e250a6 100644
--- a/src/components/dashboard/ExchangeRateWidget.jsx
+++ b/src/components/dashboard/ExchangeRateWidget.jsx
@@ -46,14 +46,14 @@ export default function ExchangeRateWidget({ exchangeRate, language, theme, comp
             <div className={`text-xl font-bold tabular-nums ${theme === 'dark' ? 'text-white' : 'text-slate-900'}`}>
               ${exchangeRate?.rate?.toFixed(4) || '---'}
             </div>
-            <div className="flex items-center justify-between mt-1 text-[10px] text-slate-500">
+            <div className={`mt-1 flex items-center justify-between text-xs ${theme === 'dark' ? 'text-slate-200' : 'text-slate-700'}`}>
               <span>
                 {exchangeRate?.previous_rate
                   ? `${language === 'en' ? 'Prev' : 'Ant'} $${exchangeRate.previous_rate.toFixed(4)}`
                   : (language === 'en' ? 'Current rate' : 'Tipo actual')}
               </span>
               {exchangeRate?.last_updated && (
-                <span className="text-slate-400">
+                <span>
                   {new Date(exchangeRate.last_updated).toLocaleTimeString([], {
                     hour: '2-digit',
                     minute: '2-digit',
@@ -152,4 +152,4 @@ export default function ExchangeRateWidget({ exchangeRate, language, theme, comp
       </Card>
     </motion.div>
   );
-}
\ No newline at end of file
+}
diff --git a/src/components/dashboard/LaneRow.jsx b/src/components/dashboard/LaneRow.jsx
index a349a41e..ce14c25e 100644
--- a/src/components/dashboard/LaneRow.jsx
+++ b/src/components/dashboard/LaneRow.jsx
@@ -12,7 +12,7 @@ export default function LaneRow({ icon: Icon, label, data, language }) {
       </div>
       <div className="flex items-center gap-2 font-medium text-slate-900 tabular-nums whitespace-nowrap">
         <span>{data.delay_minutes == null ? '—' : `${data.delay_minutes}m`}</span>
-        <span className="text-slate-400 font-normal">
+        <span className="text-slate-700 font-normal">
           · {data.lanes_open} {language === 'en' ? 'open' : 'abiertas'}
         </span>
       </div>
diff --git a/src/components/dashboard/StatsOverview.jsx b/src/components/dashboard/StatsOverview.jsx
index 68ca0601..198f90c1 100644
--- a/src/components/dashboard/StatsOverview.jsx
+++ b/src/components/dashboard/StatsOverview.jsx
@@ -91,7 +91,7 @@ export default function StatsOverview({
               <stat.icon className={`w-3.5 h-3.5 ${stat.color}`} />
             </div>
             <div className="min-w-0">
-              <p className="text-[10px] text-slate-500 dark:text-slate-400 uppercase tracking-wide leading-tight truncate">
+              <p className={`truncate text-xs uppercase leading-tight tracking-wide ${theme === 'dark' ? 'text-slate-200' : 'text-slate-700'}`}>
                 {stat.label}
               </p>
               <p className={`text-sm font-bold ${
@@ -127,7 +127,7 @@ export default function StatsOverview({
                   <stat.icon className={`w-3.5 h-3.5 ${stat.color}`} />
                 </div>
                 <div className="min-w-0 flex-1">
-                  <p className="text-[10px] text-slate-500 dark:text-slate-400 uppercase tracking-wide truncate leading-tight">
+                  <p className={`text-xs uppercase tracking-wide leading-tight ${theme === 'dark' ? 'text-slate-200' : 'text-slate-700'}`}>
                     {stat.label}
                   </p>
                   <p className={`text-sm font-bold ${
@@ -164,7 +164,7 @@ export default function StatsOverview({
                 <stat.icon className={`w-4 h-4 ${stat.color}`} />
               </div>
               <div className="min-w-0 flex-1">
-                <p className="text-[10px] text-slate-500 dark:text-slate-400 uppercase tracking-wider truncate leading-tight">
+                <p className={`text-xs uppercase tracking-wider leading-tight ${theme === 'dark' ? 'text-slate-200' : 'text-slate-700'}`}>
                   {stat.label}
                 </p>
                 <p className={`text-lg sm:text-xl font-bold ${
@@ -172,7 +172,7 @@ export default function StatsOverview({
                 } leading-tight mt-0.5 tabular-nums`}>
                   {stat.value}
                 </p>
-                <p className="text-[10px] text-slate-400 dark:text-slate-500 truncate leading-tight mt-0.5">
+                <p className={`mt-0.5 text-xs leading-tight ${theme === 'dark' ? 'text-slate-300' : 'text-slate-600'}`}>
                   {stat.hint}
                 </p>
               </div>
diff --git a/src/index.css b/src/index.css
index 181b7431..a71feb85 100644
--- a/src/index.css
+++ b/src/index.css
@@ -85,6 +85,24 @@
   body {
     @apply bg-background text-foreground;
   }
+
+  :is(a, button, input, select, textarea, [role="button"]):focus-visible {
+    outline: 2px solid #059669;
+    outline-offset: 2px;
+  }
+
+  .dark :is(a, button, input, select, textarea, [role="button"]):focus-visible {
+    outline-color: #34d399;
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    *, *::before, *::after {
+      scroll-behavior: auto !important;
+      animation-duration: 0.01ms !important;
+      animation-iteration-count: 1 !important;
+      transition-duration: 0.01ms !important;
+    }
+  }
 }
 
 @layer utilities {
@@ -116,7 +134,7 @@
     --bp-line-soft: rgba(30, 58, 95, 0.28);
     --bp-grid: rgba(30, 58, 95, 0.10);
     --bp-ink: #1e3a5f;
-    --bp-ink-dim: rgba(30, 58, 95, 0.62);
+    --bp-ink-dim: rgba(30, 58, 95, 0.84);
     --bp-good: #059669;
     --bp-moderate: #d97706;
     --bp-heavy: #e11d48;
@@ -146,7 +164,7 @@
   }
 
   .bp-line-sub {
-    font-size: 0.6875rem;
+    font-size: 0.75rem;
     line-height: 1.4;
     color: var(--bp-ink-dim);
     margin-top: 0.125rem;
@@ -156,7 +174,7 @@
     display: inline-flex;
     align-items: center;
     gap: 0.25rem;
-    font-size: 0.625rem;
+    font-size: 0.6875rem;
     letter-spacing: 0.04em;
     text-transform: uppercase;
     color: var(--bp-ink-dim);
diff --git a/src/pages/BestTime.jsx b/src/pages/BestTime.jsx
index 5d42d5e1..ebbda346 100644
--- a/src/pages/BestTime.jsx
+++ b/src/pages/BestTime.jsx
@@ -42,8 +42,9 @@ function HourBar({ entry, max, lang, isCurrentHour, isLightestHour }) {
     : median < 30
       ? 'bg-emerald-500'
       : median < 60
-        ? 'bg-amber-500'
-        : 'bg-rose-500';
+      ? 'bg-amber-500'
+        : 'bg-rose-700';
+  const valueColor = median < 60 ? 'text-slate-950' : 'text-white';
   const ringClass = isLightestHour
     ? 'ring-2 ring-emerald-500'
     : isCurrentHour
@@ -58,7 +59,7 @@ function HourBar({ entry, max, lang, isCurrentHour, isLightestHour }) {
       <div className={`flex-1 h-5 rounded-md bg-slate-100 dark:bg-gray-800 overflow-hidden ${ringClass}`}>
         <div className={`h-full ${filledColor} flex items-center justify-end pr-1.5`} style={{ width: `${widthPct}%` }}>
           {!sparse && (
-            <span className="text-[10px] font-bold text-white tabular-nums">
+            <span className={`text-xs font-bold tabular-nums ${valueColor}`}>
               {median}
             </span>
           )}
@@ -218,8 +219,8 @@ export function BestTimeIndex() {
         </ul>
       </div>
 
-      <div className="rounded-lg border border-slate-200 dark:border-gray-700 overflow-hidden">
-        <table className="w-full text-sm">
+      <div className="rounded-lg border border-slate-200 dark:border-gray-700 overflow-x-auto" role="region" aria-label={language === 'en' ? 'Best time by crossing' : 'Mejor hora por cruce'} tabIndex={0}>
+        <table className="w-full min-w-[540px] text-sm">
           <thead className="bg-slate-50 dark:bg-gray-900 text-slate-600 dark:text-slate-300 text-[11px] uppercase tracking-wide">
             <tr>
               <th className="text-left px-3 py-2 font-medium">{language === 'en' ? 'Crossing' : 'Cruce'}</th>
@@ -227,7 +228,7 @@ export function BestTimeIndex() {
               <th className="text-left px-3 py-2 font-medium">{language === 'en' ? 'Lightest hour today' : 'Hora más ligera hoy'}</th>
               <th className="text-right px-3 py-2 font-medium">{language === 'en' ? 'Median (min)' : 'Mediana (min)'}</th>
               <th className="text-right px-3 py-2 font-medium hidden sm:table-cell">{language === 'en' ? 'Day avg' : 'Prom. día'}</th>
-              <th className="px-3 py-2 font-medium" aria-label="link"></th>
+              <th className="px-3 py-2 font-medium">{language === 'en' ? 'Details' : 'Detalles'}</th>
             </tr>
           </thead>
           <tbody className="bg-white dark:bg-gray-900/40 divide-y divide-slate-200 dark:divide-gray-800">
@@ -482,7 +483,7 @@ export default function BestTime() {
                   <td className="px-3 py-2 text-slate-900 dark:text-slate-100">
                     {DAY_LABELS[language][row.day]}
                     {row.day === today && (
-                      <span className="ml-1.5 text-[10px] text-emerald-600 dark:text-emerald-400">·{language === 'en' ? 'today' : 'hoy'}</span>
+                      <span className="ml-1.5 text-xs text-emerald-800 dark:text-emerald-300">·{language === 'en' ? 'today' : 'hoy'}</span>
                     )}
                   </td>
                   <td className="px-3 py-2 text-slate-900 dark:text-slate-100">
diff --git a/src/pages/Compare.jsx b/src/pages/Compare.jsx
index 4f7b0fec..c80a0ab1 100644
--- a/src/pages/Compare.jsx
+++ b/src/pages/Compare.jsx
@@ -63,12 +63,12 @@ function CrossingPanel({ crossing, slug, aggregate, language }) {
           <h2 className="text-base sm:text-lg font-semibold text-slate-900 dark:text-white">
             {crossing.name}
           </h2>
-          <span className="text-[11px] text-slate-500">{crossing.state}</span>
+          <span className="text-xs text-slate-600 dark:text-slate-300">{crossing.state}</span>
         </div>
 
         <div className="space-y-3">
           <div>
-            <div className="text-[10px] uppercase tracking-wider text-slate-500 mb-0.5">
+            <div className="mb-0.5 text-xs uppercase tracking-wider text-slate-600 dark:text-slate-300">
               {language === 'en' ? 'Reported standard-passenger wait' : 'Espera reportada, auto estándar'}
             </div>
             <div className="text-2xl sm:text-3xl font-bold text-slate-900 dark:text-white tabular-nums">
@@ -78,7 +78,7 @@ function CrossingPanel({ crossing, slug, aggregate, language }) {
 
           <div className="grid grid-cols-2 gap-2">
             <div>
-              <div className="text-[10px] uppercase tracking-wider text-slate-500 mb-0.5">
+              <div className="mb-0.5 text-xs uppercase tracking-wider text-slate-600 dark:text-slate-300">
                 {language === 'en' ? 'Today’s lightest' : 'Hoy más ligero'}
               </div>
               <div className="text-sm font-medium text-slate-900 dark:text-white">
@@ -88,7 +88,7 @@ function CrossingPanel({ crossing, slug, aggregate, language }) {
               </div>
             </div>
             <div>
-              <div className="text-[10px] uppercase tracking-wider text-slate-500 mb-0.5">
+              <div className="mb-0.5 text-xs uppercase tracking-wider text-slate-600 dark:text-slate-300">
                 {language === 'en' ? '30-day median' : 'Mediana 30 días'}
               </div>
               <div className="text-sm font-medium text-slate-900 dark:text-white">
@@ -98,7 +98,7 @@ function CrossingPanel({ crossing, slug, aggregate, language }) {
           </div>
 
           {sampleCount != null && (
-            <div className="text-[11px] text-slate-500">
+            <div className="text-xs text-slate-600 dark:text-slate-300">
               {language === 'en'
                 ? `Based on ${sampleCount} samples`
                 : `Con base en ${sampleCount} muestras`}
@@ -107,7 +107,7 @@ function CrossingPanel({ crossing, slug, aggregate, language }) {
 
           <Link
             to={`/crossing/${slug}/`}
-            className="inline-flex items-center gap-1 text-xs font-medium text-emerald-700 dark:text-emerald-400 hover:underline"
+            className="inline-flex min-h-11 items-center gap-1 text-sm font-medium text-emerald-700 dark:text-emerald-300 hover:underline"
           >
             {language === 'en' ? 'Open full page' : 'Abrir página completa'} <ArrowRight className="w-3.5 h-3.5" />
           </Link>
diff --git a/src/pages/CrossingDetail.jsx b/src/pages/CrossingDetail.jsx
index badc8099..db67cc34 100644
--- a/src/pages/CrossingDetail.jsx
+++ b/src/pages/CrossingDetail.jsx
@@ -59,7 +59,7 @@ const TIER_BG = {
   sparse: 'rgb(241 245 249)',  // slate-100
   good: 'rgb(16 185 129)',     // emerald-500
   typical: 'rgb(245 158 11)',  // amber-500
-  heavy: 'rgb(244 63 94)',     // rose-500
+  heavy: 'rgb(190 18 60)',     // rose-700: white chart labels remain legible
 };
 
 function formatDistance(km, lang) {
@@ -638,15 +638,15 @@ export default function CrossingDetail() {
                   aria-selected={isActive}
                   onClick={() => setSelectedDay(dIdx)}
                   className={[
-                    'h-7 px-2.5 rounded-full text-xs font-medium border transition-colors',
+                    'min-h-11 min-w-11 px-2.5 rounded-full text-xs font-medium border transition-colors',
                     isActive
-                      ? 'bg-emerald-600 text-white border-emerald-600'
+                      ? 'bg-emerald-700 text-white border-emerald-700'
                       : 'bg-white dark:bg-gray-900 text-slate-700 dark:text-slate-200 border-slate-200 dark:border-gray-700 hover:bg-slate-50 dark:hover:bg-gray-800',
                   ].join(' ')}
                 >
                   {DAY_LABELS[language][dIdx]}
                   {isToday && (
-                    <span className="ml-1 text-[10px] opacity-80">
+                    <span className="ml-1 text-xs">
                       {language === 'en' ? '·today' : '·hoy'}
                     </span>
                   )}
@@ -672,7 +672,7 @@ export default function CrossingDetail() {
                   // skim — every cell looked alarming regardless of value.
                   const tier = tierFor(val);
                   const bg = TIER_BG[tier];
-                  const textColor = sparse ? 'text-slate-400' : 'text-white';
+                  const textColor = sparse ? 'text-slate-600' : tier === 'heavy' ? 'text-white' : 'text-slate-950';
 
                   // Ring layering: current hour (sky) wins; otherwise best (emerald).
                   const ringClass = isCurrent
@@ -699,17 +699,18 @@ export default function CrossingDetail() {
                         className={`w-full h-10 rounded flex items-center justify-center ${ringClass}`}
                         style={{ background: bg }}
                         title={title}
+                        role="img"
                         aria-label={title}
                       >
-                        <span className={`text-[10px] sm:text-xs font-semibold tabular-nums ${textColor}`}>
+                        <span className={`text-xs font-semibold tabular-nums ${textColor}`}>
                           {sparse ? '' : `${val}m`}
                         </span>
                       </div>
                       <span
-                        className={`text-[9px] tabular-nums ${
+                        className={`text-xs tabular-nums ${
                           isCurrent
                             ? 'text-sky-700 dark:text-sky-400 font-semibold'
-                            : 'text-slate-500'
+                            : 'text-slate-600 dark:text-slate-300'
                         }`}
                       >
                         {formatHourCompact(h)}
@@ -719,7 +720,7 @@ export default function CrossingDetail() {
                 })}
               </div>
 
-              <div className="flex flex-wrap items-center gap-x-3 gap-y-1.5 mt-3 text-[11px] text-slate-500">
+              <div className="mt-3 flex flex-wrap items-center gap-x-3 gap-y-1.5 text-xs text-slate-600 dark:text-slate-300">
                 <span className="inline-flex items-center gap-1.5">
                   <span className="inline-block w-3 h-3 rounded" style={{ background: TIER_BG.good }} />
                   {language === 'en' ? 'Quick (under 30m)' : 'Rápido (menos de 30m)'}
@@ -769,7 +770,7 @@ export default function CrossingDetail() {
                       {e.source_name}
                     </span>
                     {e.published_at && (
-                      <span className="text-[11px] text-slate-500 tabular-nums">
+                      <span className="text-xs tabular-nums text-slate-600 dark:text-slate-300">
                         {new Date(e.published_at).toLocaleDateString(
                           language === 'es' ? 'es-MX' : 'en-US',
                           { year: 'numeric', month: 'short', day: 'numeric' },
diff --git a/src/pages/Dashboard.jsx b/src/pages/Dashboard.jsx
index 1fa63309..faa64d73 100644
--- a/src/pages/Dashboard.jsx
+++ b/src/pages/Dashboard.jsx
@@ -361,7 +361,7 @@ export default function Dashboard() {
         >
           {language === 'en' ? 'Border Crossing Intelligence' : 'Inteligencia de Cruces Fronterizos'}
         </motion.h1>
-        <p className="text-xs sm:text-sm text-slate-500 mt-0.5">
+        <p className="mt-0.5 text-sm text-slate-600 dark:text-slate-300">
           {language === 'en'
             ? 'Official CBP wait times to the U.S. · Historical patterns'
             : 'Tiempos oficiales de CBP hacia EE.UU. · Patrones históricos'}
@@ -369,7 +369,7 @@ export default function Dashboard() {
 
         {/* Controls row — wraps cleanly on mobile */}
         <div className="flex items-center gap-2 flex-wrap mt-3">
-          <div className="flex items-center gap-1 text-[11px] text-slate-500 mr-auto">
+          <div className="mr-auto flex items-center gap-1 text-xs text-slate-600 dark:text-slate-300">
             <RefreshCw className="w-3 h-3" />
             <span>
               {language === 'en' ? 'Data fetched: ' : 'Datos consultados: '}
@@ -382,7 +382,7 @@ export default function Dashboard() {
             variant={view === 'analytics' ? 'default' : 'outline'}
             size="sm"
             onClick={() => setView((v) => (v === 'analytics' ? 'live' : 'analytics'))}
-            className="gap-1 h-9"
+            className="gap-1 min-h-11"
             aria-pressed={view === 'analytics'}
           >
             <BarChart3 className="w-3.5 h-3.5" />
@@ -442,7 +442,7 @@ export default function Dashboard() {
                 <Button
                   size="sm"
                   variant="default"
-                  className="h-9 text-xs px-2.5"
+                  className="min-h-11 px-3 text-sm"
                   onClick={acceptGeoPrompt}
                   disabled={geoLocating}
                 >
@@ -453,7 +453,7 @@ export default function Dashboard() {
                 <Button
                   size="sm"
                   variant="ghost"
-                  className="h-9 text-xs px-2.5"
+                  className="min-h-11 px-3 text-sm text-slate-900 hover:bg-blue-100 dark:text-slate-900 dark:hover:bg-blue-100"
                   onClick={dismissGeoPrompt}
                 >
                   {language === 'en' ? 'Not now' : 'Ahora no'}
@@ -485,7 +485,7 @@ export default function Dashboard() {
                 </button>
               )}
             </div>
-            <div className="flex items-center gap-1.5 flex-wrap justify-center sm:justify-end">
+            <div className="flex items-center gap-1.5 overflow-x-auto pb-1 sm:flex-wrap sm:justify-end" role="group" aria-label={language === 'en' ? 'Filter by region' : 'Filtrar por región'} tabIndex={0}>
               {REGIONS.map((r) => (
                 <Button
                   key={r.code}
@@ -542,7 +542,7 @@ export default function Dashboard() {
               ) : (
                 <>
                   <div className="flex flex-col gap-1.5 mb-2 sm:flex-row sm:items-center sm:justify-between sm:gap-2">
-                    <p className="text-xs text-slate-500">
+                    <p className="text-xs text-slate-600 dark:text-slate-300">
                       {language === 'en'
                         ? `Showing ${cardCrossings.length} of ${reportingCrossings.length + offlineCrossings.length}`
                         : `Mostrando ${cardCrossings.length} de ${reportingCrossings.length + offlineCrossings.length}`}
@@ -552,7 +552,7 @@ export default function Dashboard() {
                     {offlineCrossings.length > 0 && (
                       <button
                         onClick={() => setShowWithoutCurrentWaits((value) => !value)}
-                        className="self-start py-1.5 text-left text-xs text-slate-500 underline decoration-dotted hover:text-slate-900 dark:hover:text-white sm:self-auto sm:text-right"
+                        className="self-start min-h-11 py-2 text-left text-xs text-slate-600 underline decoration-dotted hover:text-slate-900 dark:text-slate-300 dark:hover:text-white sm:self-auto sm:text-right"
                       >
                         {showWithoutCurrentWaits
                           ? (language === 'en'
@@ -578,7 +578,7 @@ export default function Dashboard() {
                           <>
                             <div className="flex items-center gap-2 mb-2 mt-1">
                               <Star className="w-3.5 h-3.5 fill-amber-400 text-amber-400" />
-                              <span className="text-xs font-medium text-slate-600">
+                              <span className="text-xs font-medium text-slate-700 dark:text-slate-200">
                                 {language === 'en' ? 'Favorites' : 'Favoritos'}
                               </span>
                               <div className="flex-1 h-px bg-slate-200" />
@@ -607,7 +607,7 @@ export default function Dashboard() {
                         )}
                         {favCrossings.length > 0 && restCrossings.length > 0 && (
                           <div className="flex items-center gap-2 mb-2">
-                            <span className="text-xs font-medium text-slate-600">
+                            <span className="text-xs font-medium text-slate-700 dark:text-slate-200">
                               {language === 'en' ? 'All crossings' : 'Todos los cruces'}
                             </span>
                             <div className="flex-1 h-px bg-slate-200" />
diff --git a/src/pages/Embed.jsx b/src/pages/Embed.jsx
index c55ac992..7204e788 100644
--- a/src/pages/Embed.jsx
+++ b/src/pages/Embed.jsx
@@ -28,6 +28,10 @@ export default function Embed() {
   const direction = 'northbound';
   const compact = params.get('compact') === 'true';
 
+  useEffect(() => {
+    document.documentElement.lang = lang;
+  }, [lang]);
+
   const [crossings, setCrossings] = useState([]);
   const [aggregate, setAggregate] = useState(null);
   const [loaded, setLoaded] = useState(false);
@@ -102,20 +106,20 @@ export default function Embed() {
 
   if (!loaded) {
     return (
-      <div className={`min-h-screen w-full flex items-center justify-center ${bg} ${text}`}>
+      <main className={`min-h-screen w-full flex items-center justify-center ${bg} ${text}`}>
         <div className={`text-xs ${subtext}`}>{lang === 'es' ? 'Cargando…' : 'Loading…'}</div>
-      </div>
+      </main>
     );
   }
 
   if (!crossing) {
     return (
-      <div className={`min-h-screen w-full flex flex-col items-center justify-center ${bg} ${text} p-3`}>
-        <div className="text-sm font-medium">{lang === 'es' ? 'Cruce no encontrado' : 'Crossing not found'}</div>
+      <main className={`min-h-screen w-full flex flex-col items-center justify-center ${bg} ${text} p-3`}>
+        <h1 className="text-sm font-medium">{lang === 'es' ? 'Cruce no encontrado' : 'Crossing not found'}</h1>
         <a href="https://borderpulse.com" target="_blank" rel="noopener" className={`mt-1 text-[11px] underline ${subtext}`}>
           borderpulse.com
         </a>
-      </div>
+      </main>
     );
   }
 
@@ -147,9 +151,9 @@ export default function Embed() {
 
   const deltaColor = deltaText
     ? (deltaText.tone === 'high'
-        ? (isDark ? 'text-rose-400' : 'text-rose-600')
+        ? (isDark ? 'text-rose-400' : 'text-rose-700')
         : deltaText.tone === 'low'
-          ? (isDark ? 'text-emerald-400' : 'text-emerald-600')
+          ? (isDark ? 'text-emerald-400' : 'text-emerald-700')
           : subtext)
     : '';
 
@@ -157,14 +161,14 @@ export default function Embed() {
   const waitSize = compact ? 'text-3xl' : 'text-4xl';
 
   return (
-    <div
+    <main
       className={`min-h-screen w-full ${bg} ${text} flex flex-col font-sans`}
       style={{ fontFamily: 'system-ui, -apple-system, "Segoe UI", Roboto, sans-serif' }}
     >
       <div className={`flex-1 ${padding} flex flex-col gap-1.5 min-w-0`}>
         <div className="flex items-center justify-between gap-2 min-w-0">
           <div className="flex items-center gap-1.5 min-w-0">
-            <span className="text-[13px] font-semibold truncate">{crossing.name}</span>
+            <h1 className="truncate text-[13px] font-semibold">{crossing.name}</h1>
             <span className="text-xs flex-shrink-0" aria-hidden="true">{FLAG[crossing.state] || ''}</span>
           </div>
           <span className={`text-[10px] uppercase tracking-wide ${subtext} flex-shrink-0`}>
@@ -220,6 +224,6 @@ export default function Embed() {
         </div>
         <span className={`text-[10px] ${subtext} flex-shrink-0`}>borderpulse.com →</span>
       </a>
-    </div>
+    </main>
   );
 }
diff --git a/src/pages/Privacy.jsx b/src/pages/Privacy.jsx
index 7bbc0df3..04148a1c 100644
--- a/src/pages/Privacy.jsx
+++ b/src/pages/Privacy.jsx
@@ -1,7 +1,6 @@
 import React, { useEffect } from 'react';
 import { Link } from 'react-router-dom';
 import { ArrowLeft, Database, Megaphone } from 'lucide-react';
-import { Button } from '@/components/ui/button';
 import { updatePageMeta, resetPageMeta } from '@/lib/seo';
 
 export default function Privacy({ lang = 'en' }) {
@@ -18,13 +17,11 @@ export default function Privacy({ lang = 'en' }) {
   }, [es]);
 
   return (
-    <main className="mx-auto max-w-[900px] p-4 sm:p-6">
+    <div className="mx-auto max-w-[900px] p-4 sm:p-6">
       <div className="mb-5">
-        <Link to="/">
-          <Button variant="ghost" size="sm" className="-ml-2 gap-1">
-            <ArrowLeft className="h-3.5 w-3.5" />
-            {es ? 'Todos los cruces' : 'All crossings'}
-          </Button>
+        <Link to="/" className="-ml-2 inline-flex min-h-11 items-center gap-1 rounded-md px-3 text-sm font-medium hover:bg-slate-100 dark:hover:bg-gray-800">
+          <ArrowLeft className="h-3.5 w-3.5" />
+          {es ? 'Todos los cruces' : 'All crossings'}
         </Link>
       </div>
       <header className="mb-6">
@@ -73,6 +70,6 @@ export default function Privacy({ lang = 'en' }) {
       <p className="mt-6 text-xs text-slate-500 dark:text-slate-400">
         {es ? 'No es asesoría legal. Borrador actualizado: 27 de septiembre de 2026.' : 'Not legal advice. Draft updated: September 27, 2026.'}
       </p>
-    </main>
+    </div>
   );
 }
diff --git a/src/pages/WalkOrDrive.jsx b/src/pages/WalkOrDrive.jsx
index a60f903e..cba534e8 100644
--- a/src/pages/WalkOrDrive.jsx
+++ b/src/pages/WalkOrDrive.jsx
@@ -34,7 +34,7 @@ function PanelCard({ icon: Icon, title, wait, sub, lang, recommendedLabel }) {
         <div className="flex items-center justify-between gap-2 mb-2">
           <div className="flex items-center gap-2">
             <Icon className="w-4 h-4 text-slate-600 dark:text-slate-400" />
-            <h3 className="text-sm font-semibold text-slate-900 dark:text-white">{title}</h3>
+            <h2 className="text-sm font-semibold text-slate-900 dark:text-white">{title}</h2>
           </div>
           {recommendedLabel && (
             <span className="inline-flex items-center rounded-full bg-emerald-100 dark:bg-emerald-950 px-2 py-0.5 text-[10px] font-semibold text-emerald-800 dark:text-emerald-300">
@@ -45,7 +45,7 @@ function PanelCard({ icon: Icon, title, wait, sub, lang, recommendedLabel }) {
         <div className="text-2xl sm:text-3xl font-bold text-slate-900 dark:text-white tabular-nums">
           {wait == null ? '—' : `${wait} min`}
         </div>
-        <p className="text-[11px] text-slate-500 mt-1">{sub}</p>
+        <p className="mt-1 text-xs text-slate-600 dark:text-slate-300">{sub}</p>
       </CardContent>
     </Card>
   );