diff --git a/app/src/components/AboutButton.tsx b/app/src/components/AboutButton.tsx
index ac241482..8f7807d9 100644
--- a/app/src/components/AboutButton.tsx
+++ b/app/src/components/AboutButton.tsx
@@ -143,7 +143,7 @@ export default function AboutButton({ ui, links, people, variant = 'circle' }: P
             aria-label={ui.close}
             title={ui.close}
             onClick={close}
-            class="absolute top-5 right-5 flex h-9 w-9 items-center justify-center rounded-full border border-border-strong text-muted hover:border-border-hover hover:text-fg"
+            class="absolute top-4 right-4 flex h-11 w-11 items-center justify-center rounded-full border border-border-strong text-muted hover:border-border-hover hover:text-fg"
           >
             <svg aria-hidden="true" width="14" height="14" viewBox="0 0 24 24" fill="none">
               <path d="M6 6l12 12M18 6 6 18" stroke="currentColor" stroke-width="2" />
@@ -169,7 +169,7 @@ export default function AboutButton({ ui, links, people, variant = 'circle' }: P
                     href={l.href}
                     target="_blank"
                     rel="noopener noreferrer"
-                    class="inline-flex items-center gap-1.5 rounded-full border border-border-strong px-3 py-1 text-sm text-fg-soft hover:border-border-hover hover:text-fg"
+                    class="inline-flex min-h-11 items-center gap-1.5 rounded-full border border-border-strong px-3 py-1 text-sm sm:min-h-0 text-fg-soft hover:border-border-hover hover:text-fg"
                   >
                     {l.label}
                     <ExternalIcon />
diff --git a/app/src/components/Account.tsx b/app/src/components/Account.tsx
index a32eea6e..3c9157bd 100644
--- a/app/src/components/Account.tsx
+++ b/app/src/components/Account.tsx
@@ -23,7 +23,7 @@ interface Props {
 }
 
 const button =
-  'rounded border border-border-strong px-3 py-1.5 text-sm hover:border-border-hover disabled:opacity-50';
+  'min-h-11 rounded border border-border-strong px-3 py-1.5 text-sm hover:border-border-hover disabled:opacity-50 sm:min-h-0';
 
 /** What the signed-out view offers (A87): email only behind EMAIL_SIGNIN, providers by build variable. */
 const options = signInOptions({ emailSignin: EMAIL_SIGNIN, providers: AUTH_PROVIDERS });
@@ -148,7 +148,7 @@ export default function Account({ lang, ui }: Props) {
                 type="email"
                 required
                 autocomplete="email"
-                class="min-w-0 flex-1 rounded border border-border-strong bg-surface px-2 py-1.5 text-sm"
+                class="min-w-0 flex-1 rounded border border-border-strong bg-surface px-2 py-1.5 text-base sm:text-sm"
                 value={email}
                 onInput={(e) => setEmail(e.currentTarget.value)}
               />
diff --git a/app/src/components/AccountMenu.tsx b/app/src/components/AccountMenu.tsx
index 574ca8b7..12923405 100644
--- a/app/src/components/AccountMenu.tsx
+++ b/app/src/components/AccountMenu.tsx
@@ -43,7 +43,7 @@ export default function AccountMenu({ href, ui }: Props) {
   if (s.status === 'loading' || s.status === 'off') return null;
   if (s.status === 'signed-out') {
     return (
-      <a class="py-1.5 hover:text-fg md:py-0" href={href}>
+      <a class="flex min-h-11 items-center hover:text-fg md:min-h-0" href={href}>
         {ui.signIn}
       </a>
     );
@@ -79,7 +79,7 @@ export default function AccountMenu({ href, ui }: Props) {
     ) : null;
 
   return (
-    <span class="inline-flex items-center gap-2 py-1.5 md:py-0">
+    <span class="inline-flex min-h-11 items-center gap-2 md:min-h-0">
       <a class="hover:text-fg" href={href} title={s.email}>
         {ui.account}
       </a>
diff --git a/app/src/components/KnowledgeStatus.tsx b/app/src/components/KnowledgeStatus.tsx
index d9ab3834..3b49756a 100644
--- a/app/src/components/KnowledgeStatus.tsx
+++ b/app/src/components/KnowledgeStatus.tsx
@@ -36,7 +36,7 @@ export default function KnowledgeStatus({ termId, ui }: Props) {
       <div class="flex flex-wrap gap-2">
         {STATUSES.map((s) => (
           <button
-            class={`rounded border px-2 py-1 text-xs ${status === s ? ACTIVE[s] : 'border-border-strong text-muted hover:border-border-hover'}`}
+            class={`min-h-11 rounded border px-3 py-1 text-sm sm:min-h-0 sm:px-2 sm:text-xs ${status === s ? ACTIVE[s] : 'border-border-strong text-muted hover:border-border-hover'}`}
             aria-pressed={status === s}
             onClick={() => choose(s)}
           >
diff --git a/app/src/components/Quiz.tsx b/app/src/components/Quiz.tsx
index 23856f1a..dea18b43 100644
--- a/app/src/components/Quiz.tsx
+++ b/app/src/components/Quiz.tsx
@@ -85,7 +85,7 @@ export default function Quiz({
   if (!session) {
     return (
       <button
-        class="rounded border border-border-hover px-3 py-1.5 text-sm hover:bg-surface"
+        class="min-h-11 rounded border border-border-hover px-3 py-1.5 text-sm hover:bg-surface sm:min-h-0"
         onClick={start}
       >
         {ui.start}
@@ -106,7 +106,7 @@ export default function Quiz({
           {ui.score.replace('{n}', String(score)).replace('{m}', String(session.length))}
         </p>
         <button
-          class="rounded border border-border-hover px-3 py-1.5 text-sm hover:bg-surface"
+          class="min-h-11 rounded border border-border-hover px-3 py-1.5 text-sm hover:bg-surface sm:min-h-0"
           onClick={start}
         >
           {ui.again}
@@ -148,7 +148,7 @@ export default function Quiz({
                 : 'border-border opacity-60';
           return (
             <button
-              class={`rounded border px-3 py-2 text-left text-sm ${state}`}
+              class={`min-h-11 rounded border px-3 py-2 text-left text-sm ${state}`}
               onClick={() => answer(o.id)}
             >
               {o.label}
@@ -183,7 +183,7 @@ export default function Quiz({
             </p>
           )}
           <button
-            class="rounded border border-border-hover px-3 py-1 hover:bg-surface"
+            class="min-h-11 rounded border border-border-hover px-3 py-1 hover:bg-surface sm:min-h-0"
             onClick={() => {
               setIndex(index + 1);
               setChosen(null);
diff --git a/app/src/components/RecentTerms.tsx b/app/src/components/RecentTerms.tsx
index eb002588..bdf16ae2 100644
--- a/app/src/components/RecentTerms.tsx
+++ b/app/src/components/RecentTerms.tsx
@@ -31,7 +31,11 @@ export default function RecentTerms({ names, termBase, ui }: Props) {
     <div class="mt-6">
       <div class="mb-2 flex items-baseline gap-3">
         <h3 class="text-xs tracking-widest text-subtle uppercase">{ui.recentlyViewed}</h3>
-        <button type="button" class="text-xs text-subtle hover:text-fg-soft" onClick={clear}>
+        <button
+          type="button"
+          class="min-h-11 text-xs text-subtle hover:text-fg-soft sm:min-h-0"
+          onClick={clear}
+        >
           {ui.clearRecent}
         </button>
       </div>
@@ -39,7 +43,7 @@ export default function RecentTerms({ names, termBase, ui }: Props) {
         {ids.map((id) => (
           <li key={id}>
             <a
-              class="inline-block rounded border border-border px-2 py-1 text-sm text-fg-soft hover:border-border-hover hover:text-fg"
+              class="inline-flex min-h-11 items-center rounded border border-border px-2 py-1 text-sm sm:min-h-0 text-fg-soft hover:border-border-hover hover:text-fg"
               href={`${termBase}${id}/`}
             >
               {names[id]}
diff --git a/app/src/components/Search.tsx b/app/src/components/Search.tsx
index a0d814a5..be2e3763 100644
--- a/app/src/components/Search.tsx
+++ b/app/src/components/Search.tsx
@@ -169,7 +169,7 @@ export default function Search({
         onInput={(e) => setQuery((e.target as HTMLInputElement).value)}
         placeholder={placeholder}
         aria-label={placeholder}
-        class="w-full rounded border border-border-strong bg-surface px-3 py-2 text-fg placeholder:text-subtle focus:border-border-hover focus:outline-none"
+        class="w-full rounded border border-border-strong bg-surface px-3 py-2.5 text-base sm:py-2 text-fg placeholder:text-subtle focus:border-border-hover focus:outline-none"
       />
       {q && !engine && (
         <p
@@ -181,7 +181,7 @@ export default function Search({
       )}
       {q && engine && (
         <ul
-          class="absolute z-10 mt-1 w-full overflow-hidden rounded border border-border bg-surface shadow-lg"
+          class="absolute z-10 mt-1 max-h-[70dvh] w-full overflow-y-auto overscroll-contain rounded border border-border bg-surface shadow-lg"
           aria-live="polite"
         >
           {action && (
@@ -227,7 +227,8 @@ export default function Search({
           )}
         </ul>
       )}
-      {hint && <p class="mt-2 text-xs text-subtle">{hint}</p>}
+      {/* The "/" shortcut means nothing without a keyboard. */}
+      {hint && <p class="mt-2 text-xs text-subtle pointer-coarse:hidden">{hint}</p>}
     </div>
   );
 }
diff --git a/app/src/components/StudyHub.tsx b/app/src/components/StudyHub.tsx
index 9045248f..89bc7040 100644
--- a/app/src/components/StudyHub.tsx
+++ b/app/src/components/StudyHub.tsx
@@ -79,7 +79,7 @@ export default function StudyHub({
           {next.map((n) => (
             <li>
               <a
-                class="rounded border border-border-strong px-2 py-1 text-sm hover:border-border-hover"
+                class="inline-flex min-h-11 items-center rounded border border-border-strong px-2 py-1 text-sm hover:border-border-hover sm:min-h-0"
                 href={`${termBase}${n.id}/`}
               >
                 {n.term[lang]}
@@ -94,7 +94,7 @@ export default function StudyHub({
         <label class="mb-4 flex flex-wrap items-center gap-2 text-sm text-muted">
           {ui.quizMeOn}
           <select
-            class="rounded border border-border-strong bg-surface px-2 py-1 text-sm text-fg"
+            class="min-h-11 rounded border border-border-strong bg-surface px-2 py-1 text-base text-fg sm:min-h-0 sm:text-sm"
             value={scope}
             onChange={(e) => {
               setScope((e.target as HTMLSelectElement).value as Scope);
diff --git a/app/src/components/Timeline.tsx b/app/src/components/Timeline.tsx
index 2a81a3ce..7aaf029e 100644
--- a/app/src/components/Timeline.tsx
+++ b/app/src/components/Timeline.tsx
@@ -65,7 +65,7 @@ const SSR_WIDTH = 1280;
 const SSR_BUDGET = 560;
 // Vertical (small screens) geometry, px.
 const V_ZOOM = [4, 6, 10, 16, 22];
-const V_ITEM = 20;
+const V_ITEM = 24; // one phone row (h-6): a 24px tap target, the WCAG 2.5.8 minimum
 const AXIS_COL = 44;
 const DEFAULT_ZOOM = 0;
 
@@ -329,7 +329,7 @@ export default function Timeline(props: Props) {
   }, [more?.pinned]);
 
   const chip =
-    'rounded-full border px-3 py-1 text-xs transition-colors hover:border-border-hover aria-pressed:text-fg';
+    'min-h-11 min-w-11 rounded-full border px-3 py-1 text-xs transition-colors sm:min-h-0 sm:min-w-0 hover:border-border-hover aria-pressed:text-fg';
   const selItem = sel ? byId.get(sel.id) : undefined;
   const single = shown.length === 1;
 
@@ -368,7 +368,7 @@ export default function Timeline(props: Props) {
         <span class="ml-auto flex items-center gap-1" role="group" aria-label={text.zoom}>
           <button
             type="button"
-            class="h-7 w-7 rounded border border-border-strong text-fg-soft hover:border-border-hover disabled:opacity-40"
+            class="h-11 w-11 rounded border border-border-strong text-fg-soft hover:border-border-hover disabled:opacity-40 sm:h-7 sm:w-7"
             aria-label={text.zoomOut}
             title={text.zoomOut}
             disabled={zoom === 0}
@@ -378,7 +378,7 @@ export default function Timeline(props: Props) {
           </button>
           <button
             type="button"
-            class="h-7 w-7 rounded border border-border-strong text-fg-soft hover:border-border-hover disabled:opacity-40"
+            class="h-11 w-11 rounded border border-border-strong text-fg-soft hover:border-border-hover disabled:opacity-40 sm:h-7 sm:w-7"
             aria-label={text.zoomIn}
             title={text.zoomIn}
             disabled={zoom === H_ZOOM.length - 1}
@@ -594,7 +594,7 @@ export default function Timeline(props: Props) {
           <span style={{ width: AXIS_COL }} class="shrink-0" />
           {[...lanes.keys()].map((lane) => (
             <h2
-              class="map-ink min-w-0 flex-1 truncate px-1 py-2 text-[11px] font-medium"
+              class="map-ink min-w-0 flex-1 truncate px-1 py-2 text-xs font-medium"
               style={`${inkVars(ink(lane))}color:var(--ink)`}
             >
               {domainLabels[lane] ?? lane}
@@ -624,7 +624,7 @@ export default function Timeline(props: Props) {
                 }}
               >
                 <span
-                  class="absolute top-1 left-0.5 text-[9px] tracking-widest whitespace-nowrap text-subtle uppercase"
+                  class="absolute top-1 left-0.5 text-[10px] tracking-widest whitespace-nowrap text-subtle uppercase"
                   style={{ writingMode: 'vertical-rl', transform: 'rotate(180deg)' }}
                 >
                   {eraLabels[b.id]}
@@ -650,13 +650,13 @@ export default function Timeline(props: Props) {
             <ul class="relative min-w-0 flex-1 border-l border-border">
               {list.map((it) => (
                 <li
-                  class="absolute right-0 left-0 flex h-5 items-center px-1"
+                  class="absolute right-0 left-0 flex h-6 items-center px-1"
                   style={{ top: v.pos.get(it.id) }}
                 >
                   <a
                     href={it.href}
                     data-tl-item
-                    class={`flex min-w-0 items-center gap-1 ${it.hub ? 'font-semibold text-fg' : 'text-fg-soft'} ${single ? 'text-xs' : 'text-[10px]'}`}
+                    class={`flex h-6 min-w-0 items-center gap-1 ${it.hub ? 'font-semibold text-fg' : 'text-fg-soft'} ${single ? 'text-sm' : 'text-[11px]'}`}
                     aria-label={`${it.name}, ${it.year}`}
                     {...handlers(it)}
                   >
@@ -693,7 +693,7 @@ export default function Timeline(props: Props) {
           ref={popRef}
           role={sel.pinned ? 'dialog' : 'tooltip'}
           aria-label={selItem.name}
-          class="fixed inset-x-4 bottom-4 z-50 rounded-lg border border-border-strong bg-surface/95 p-4 text-sm shadow-xl shadow-black/20 dark:shadow-black/50 backdrop-blur sm:inset-x-auto sm:bottom-auto sm:w-80"
+          class="fixed inset-x-4 bottom-[max(1rem,env(safe-area-inset-bottom))] z-50 rounded-lg border border-border-strong bg-surface/95 p-4 text-sm shadow-xl shadow-black/20 dark:shadow-black/50 backdrop-blur sm:inset-x-auto sm:bottom-auto sm:w-80"
           style={popStyle(sel.x, sel.y)}
         >
           <div class="mb-1 flex items-baseline gap-2">
@@ -709,13 +709,16 @@ export default function Timeline(props: Props) {
           </p>
           {selItem.summary && <p class="mb-3 text-fg-soft">{selItem.summary}</p>}
           <div class="flex items-center justify-between">
-            <a class="text-accent hover:underline" href={selItem.href}>
+            <a
+              class="inline-flex min-h-11 items-center text-accent hover:underline sm:min-h-0"
+              href={selItem.href}
+            >
               {text.openTerm} →
             </a>
             {sel.pinned && (
               <button
                 type="button"
-                class="text-xs text-muted hover:text-fg"
+                class="min-h-11 px-2 text-sm text-muted hover:text-fg sm:min-h-0 sm:px-0 sm:text-xs"
                 onClick={() => setSel(null)}
               >
                 {text.close}
diff --git a/app/src/components/Tour.tsx b/app/src/components/Tour.tsx
index 5eecb2a9..ecea646b 100644
--- a/app/src/components/Tour.tsx
+++ b/app/src/components/Tour.tsx
@@ -461,16 +461,20 @@ export default function Tour({ steps, langBase, autoStart = true, ui }: Props) {
 
   if (view.kind === 'resume') {
     return (
-      <div class="tour-pill fixed bottom-4 left-4 flex items-center gap-2 rounded border border-border-strong bg-surface px-3 py-2 text-sm shadow-lg print:hidden">
+      <div class="tour-pill fixed bottom-[max(1rem,env(safe-area-inset-bottom))] left-[max(1rem,env(safe-area-inset-left))] flex items-center gap-2 rounded border border-border-strong bg-surface px-3 py-2 text-sm shadow-lg print:hidden">
         <button
           type="button"
-          class="text-accent hover:underline"
+          class="min-h-11 text-accent hover:underline sm:min-h-0"
           onClick={() => go(view.step)}
           data-tour-resume
         >
           {fillCount(ui.tourContinue, view.step, total)} →
         </button>
-        <button type="button" class="text-subtle hover:text-fg-soft" onClick={() => finish(false)}>
+        <button
+          type="button"
+          class="min-h-11 text-subtle hover:text-fg-soft sm:min-h-0"
+          onClick={() => finish(false)}
+        >
           {ui.tourEnd}
         </button>
       </div>
@@ -480,7 +484,7 @@ export default function Tour({ steps, langBase, autoStart = true, ui }: Props) {
 
   const titleId = 'tour-title';
   const bodyId = 'tour-body';
-  const btn = 'rounded border px-3 py-1.5 text-sm';
+  const btn = 'min-h-11 rounded border px-3 py-1.5 text-sm sm:min-h-0';
   const primary = `${btn} border-amber-400 bg-amber-400 font-medium text-on-accent hover:bg-amber-300`;
   const secondary = `${btn} border-border-strong text-fg-soft hover:border-border-hover`;
   const sv = shown?.view;
@@ -501,7 +505,7 @@ export default function Tour({ steps, langBase, autoStart = true, ui }: Props) {
         aria-labelledby={titleId}
         aria-describedby={bodyId}
         tabIndex={-1}
-        class="tour-card max-h-[60vh] overflow-y-auto rounded border border-border-strong bg-surface p-4 text-fg shadow-2xl focus:outline-none"
+        class="tour-card max-h-[60dvh] overflow-y-auto rounded border border-border-strong bg-surface p-4 text-fg shadow-2xl focus:outline-none"
       >
         <div class="mb-1 flex items-start justify-between gap-4">
           <h2 id={titleId} class="text-base font-semibold">
@@ -511,7 +515,7 @@ export default function Tour({ steps, langBase, autoStart = true, ui }: Props) {
             type="button"
             aria-label={ui.tourClose}
             title={ui.tourClose}
-            class="-mt-1 -mr-1 px-1 text-lg leading-none text-subtle hover:text-fg"
+            class="-mt-3 -mr-3 flex h-11 w-11 shrink-0 items-center justify-center text-lg leading-none text-subtle hover:text-fg sm:-mt-1 sm:-mr-1 sm:h-auto sm:w-auto sm:px-1"
             onClick={() => finish(welcome ? dontShow : false)}
           >
             ×
@@ -530,7 +534,7 @@ export default function Tour({ steps, langBase, autoStart = true, ui }: Props) {
                 {ui.tourNotNow}
               </button>
             </div>
-            <label class="flex items-center gap-2 text-xs text-muted">
+            <label class="flex min-h-11 items-center gap-2 text-sm text-muted sm:min-h-0 sm:text-xs">
               <input
                 type="checkbox"
                 checked={dontShow}
diff --git a/app/src/layouts/Base.astro b/app/src/layouts/Base.astro
index 956f2085..5ac9d380 100644
--- a/app/src/layouts/Base.astro
+++ b/app/src/layouts/Base.astro
@@ -45,7 +45,7 @@ const themes = [
 const menuCls =
   'absolute top-full right-0 z-40 mt-2 min-w-40 rounded-md border border-border-strong bg-surface py-1 text-sm text-fg shadow-lg shadow-black/20';
 const itemCls =
-  'flex w-full items-center gap-2 px-3 py-2 text-left hover:bg-surface-2 focus-visible:bg-surface-2 focus-visible:outline-none';
+  'flex min-h-11 w-full items-center gap-2 px-3 py-2 text-left md:min-h-0 hover:bg-surface-2 focus-visible:bg-surface-2 focus-visible:outline-none';
 const path = Astro.url.pathname;
 const alternates = (['en', 'da'] as const).map((l) => ({
   lang: l,
@@ -89,7 +89,7 @@ const tourUi = {
 <html lang={lang} data-lang-base={langBase}>
   <head>
     <meta charset="utf-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover" />
     {/* Cross-origin requests get the origin only, never the path (A89). The CSP meta is
         added by Astro (security.csp, integrations/csp.mjs). */}
     <meta name="referrer" content="strict-origin-when-cross-origin" />
@@ -132,7 +132,7 @@ const tourUi = {
       </style>
     </noscript>
   </head>
-  <body class="flex min-h-screen flex-col bg-bg font-sans text-fg antialiased">
+  <body class="flex min-h-dvh flex-col bg-bg font-sans text-fg antialiased">
     {/* Blocking, before any content is parsed, so there is no flash of the wrong theme
         (A92). Not in <head>: Astro appends the CSP meta there last, and nothing may
         run before the policy. */}
@@ -144,28 +144,44 @@ const tourUi = {
       {ui.skipToContent}
     </a>
     <header
-      class="group relative flex items-center justify-between gap-4 border-b border-border px-4 py-4 sm:px-6 print:hidden"
+      class="group relative flex items-center justify-between gap-4 border-b border-border px-4 py-2 sm:px-6 md:py-4 print:hidden"
       data-site-header
     >
-      <a href={langBase} class="font-mono text-lg tracking-tight">
-        atlas
-      </a>
-      <div class="flex items-center gap-4 text-sm text-muted">
+      <div class="flex items-center gap-2">
+        <a
+          href={langBase}
+          class="inline-flex min-h-11 items-center font-mono text-lg tracking-tight md:min-h-0"
+        >
+          atlas
+        </a>
+        {/* Phones: a badge here, as the corner ribbon would cover content and controls. */}
+        <span
+          aria-hidden="true"
+          class="rounded bg-amber-400/90 px-1.5 py-0.5 text-[10px] leading-none font-bold tracking-widest text-on-accent md:hidden"
+        >
+          BETA
+        </span>
+      </div>
+      <div class="flex items-center gap-1 text-sm text-muted md:gap-4">
         <nav
           id="site-nav"
           aria-label={ui.menu}
-          class="absolute inset-x-0 top-full z-30 hidden flex-col gap-1 border-b border-border bg-bg px-4 py-3 group-data-[open]:flex md:static md:flex md:flex-row md:flex-wrap md:justify-end md:gap-x-5 md:gap-y-1 md:border-0 md:bg-transparent md:p-0"
+          class="absolute inset-x-0 top-full z-30 hidden max-h-[calc(100dvh-4rem)] flex-col overflow-y-auto overscroll-contain border-b border-border bg-bg px-4 py-2 shadow-lg shadow-black/20 group-data-[open]:flex md:static md:flex md:flex-row md:flex-wrap md:justify-end md:gap-x-5 md:gap-y-1 md:border-0 md:bg-transparent md:p-0"
         >
           {nav.map((n) => (
             <a
-              class="py-1.5 hover:text-fg aria-[current=page]:text-fg md:py-0"
+              class="flex min-h-11 items-center hover:text-fg aria-[current=page]:text-fg md:min-h-0"
               href={n.href}
               aria-current={current(n.href) ? 'page' : undefined}
             >
               {n.label}
             </a>
           ))}
-          <button type="button" class="py-1.5 text-left hover:text-fg md:py-0" data-tour-start>
+          <button
+            type="button"
+            class="flex min-h-11 items-center text-left hover:text-fg md:min-h-0"
+            data-tour-start
+          >
             {ui.tourStart}
           </button>
           {ACCOUNTS && (
@@ -191,7 +207,7 @@ const tourUi = {
           <button
             type="button"
             id="theme-button"
-            class="flex rounded p-1 hover:text-fg"
+            class="flex h-11 w-11 items-center justify-center rounded hover:text-fg md:h-auto md:w-auto md:p-1"
             aria-haspopup="menu"
             aria-expanded="false"
             aria-controls="theme-menu"
@@ -252,7 +268,7 @@ const tourUi = {
           <button
             type="button"
             id="lang-switch"
-            class="flex items-center gap-1.5 rounded p-1 hover:text-fg"
+            class="flex min-h-11 items-center gap-1.5 rounded px-2 hover:text-fg md:min-h-0 md:p-1"
             aria-haspopup="menu"
             aria-expanded="false"
             aria-controls="lang-menu"
@@ -292,7 +308,7 @@ const tourUi = {
         </div>
         <button
           type="button"
-          class="-mr-1 rounded p-1 text-fg-soft hover:text-fg md:hidden"
+          class="-mr-2 flex h-11 w-11 items-center justify-center rounded text-fg-soft hover:text-fg md:hidden"
           aria-controls="site-nav"
           aria-expanded="false"
           aria-label={ui.menu}
@@ -330,7 +346,10 @@ const tourUi = {
       <slot />
     </main>
     {!wide && (
-      <footer class="mx-auto flex w-full max-w-5xl flex-wrap gap-5 px-4 pb-10 text-xs text-subtle sm:px-6 print:hidden">
+      <footer
+        class="mx-auto flex w-full max-w-5xl flex-wrap gap-x-5 px-4 pb-[max(2.5rem,env(safe-area-inset-bottom))] text-sm text-subtle sm:gap-y-5 sm:px-6 sm:text-xs print:hidden"
+        data-site-footer
+      >
         <a class="hover:text-fg-soft" href={url(`${lang}/review/`)}>
           {ui.review}
         </a>
@@ -357,7 +376,7 @@ const tourUi = {
         href="#main"
         data-back-to-top
         hidden
-        class="fixed right-4 bottom-4 z-30 rounded-full border border-border-strong bg-surface/90 px-3 py-2 text-xs text-fg-soft shadow hover:text-fg print:hidden"
+        class="fixed right-[max(1rem,env(safe-area-inset-right))] bottom-[max(1rem,env(safe-area-inset-bottom))] z-30 inline-flex min-h-11 items-center rounded-full border border-border-strong bg-surface/90 px-4 text-sm sm:min-h-0 sm:px-3 sm:py-2 sm:text-xs text-fg-soft shadow hover:text-fg print:hidden"
       >
         ↑ {ui.backToTop}
       </a>
@@ -544,10 +563,11 @@ const tourUi = {
         }
       });
     </script>
-    {/* Beta ribbon: fixed corner watermark, never blocks clicks, hidden in print. */}
+    {/* Beta ribbon: fixed corner watermark, never blocks clicks, hidden in print. Below md
+        it would cover content and the tour pill, so the header carries a badge instead. */}
     <div
       aria-hidden="true"
-      class="pointer-events-none fixed bottom-0 left-0 z-50 h-32 w-32 overflow-hidden print:hidden"
+      class="pointer-events-none fixed bottom-0 left-0 z-50 hidden h-32 w-32 overflow-hidden md:block print:hidden"
     >
       <div class="absolute bottom-[26px] left-[-44px] w-[180px] rotate-45 bg-amber-400/90 py-1.5 text-center text-sm font-bold tracking-[0.3em] text-on-accent shadow-lg shadow-black/40">
         BETA
diff --git a/app/src/pages/404.astro b/app/src/pages/404.astro
index 65ca5546..5946577b 100644
--- a/app/src/pages/404.astro
+++ b/app/src/pages/404.astro
@@ -23,7 +23,7 @@ import { UI_EXTRA } from '../lib/ui-extra';
     <ul class="mt-8 flex flex-wrap gap-3 text-sm">
       <li>
         <a
-          class="rounded border border-border-strong px-3 py-1.5 hover:border-border-hover"
+          class="inline-flex min-h-11 items-center rounded border border-border-strong px-3 py-1.5 hover:border-border-hover sm:min-h-0"
           href={url('en/')}
         >
           {UI.en.notFoundHome}
@@ -32,7 +32,7 @@ import { UI_EXTRA } from '../lib/ui-extra';
       <li>
         <a
           lang="da"
-          class="rounded border border-border-strong px-3 py-1.5 hover:border-border-hover"
+          class="inline-flex min-h-11 items-center rounded border border-border-strong px-3 py-1.5 hover:border-border-hover sm:min-h-0"
           href={url('da/')}
         >
           {UI.da.notFoundHome}
@@ -40,7 +40,7 @@ import { UI_EXTRA } from '../lib/ui-extra';
       </li>
       <li>
         <a
-          class="rounded border border-border-strong px-3 py-1.5 hover:border-border-hover"
+          class="inline-flex min-h-11 items-center rounded border border-border-strong px-3 py-1.5 hover:border-border-hover sm:min-h-0"
           href={url('en/terms/')}
         >
           {UI_EXTRA.en.notFoundAz}
@@ -49,7 +49,7 @@ import { UI_EXTRA } from '../lib/ui-extra';
       <li>
         <a
           lang="da"
-          class="rounded border border-border-strong px-3 py-1.5 hover:border-border-hover"
+          class="inline-flex min-h-11 items-center rounded border border-border-strong px-3 py-1.5 hover:border-border-hover sm:min-h-0"
           href={url('da/terms/')}
         >
           {UI_EXTRA.da.notFoundAz}
diff --git a/app/src/pages/[lang]/articles/[...slug].astro b/app/src/pages/[lang]/articles/[...slug].astro
index 509d42e5..df231f65 100644
--- a/app/src/pages/[lang]/articles/[...slug].astro
+++ b/app/src/pages/[lang]/articles/[...slug].astro
@@ -17,10 +17,13 @@ const { Content } = await render(article);
 ---
 
 <Base lang={lang} title={article.data.title}>
-  <a class="text-sm text-muted hover:text-fg" href={termUrl(lang, article.data.term)}>
+  <a
+    class="inline-flex min-h-11 items-center text-sm text-muted hover:text-fg sm:min-h-0"
+    href={termUrl(lang, article.data.term)}
+  >
     {UI[lang].backToTerm}
   </a>
-  <article class="prose-atlas mt-6 space-y-4 leading-relaxed text-fg-soft [&_a]:underline [&_h1]:text-3xl [&_h1]:font-semibold [&_h1]:text-fg [&_h2]:mt-8 [&_h2]:text-xl [&_h2]:font-semibold [&_h2]:text-fg [&_h3]:mt-6 [&_h3]:font-semibold [&_li]:ml-5 [&_ol]:list-decimal [&_table]:w-full [&_td]:border [&_td]:border-border [&_td]:px-2 [&_td]:py-1 [&_th]:border [&_th]:border-border [&_th]:px-2 [&_th]:py-1 [&_th]:text-left [&_ul]:list-disc">
+  <article class="prose-atlas mt-6 space-y-4 leading-relaxed text-fg-soft [&_a]:underline [&_h1]:text-3xl [&_h1]:font-semibold [&_h1]:text-fg [&_h2]:mt-8 [&_h2]:text-xl [&_h2]:font-semibold [&_h2]:text-fg [&_h3]:mt-6 [&_h3]:font-semibold [&_li]:ml-5 [&_ol]:list-decimal [&_pre]:overflow-x-auto [&_table]:w-full [&_td]:border [&_td]:border-border [&_td]:px-2 [&_td]:py-1 [&_th]:border [&_th]:border-border [&_th]:px-2 [&_th]:py-1 [&_th]:text-left [&_ul]:list-disc">
     <Content />
   </article>
 </Base>
diff --git a/app/src/pages/[lang]/compare/[pair].astro b/app/src/pages/[lang]/compare/[pair].astro
index 7cb6460a..9966b73e 100644
--- a/app/src/pages/[lang]/compare/[pair].astro
+++ b/app/src/pages/[lang]/compare/[pair].astro
@@ -34,7 +34,10 @@ const title = `${pair.a.data.term[lang]} ${ui.versus} ${pair.b.data.term[lang]}`
 <Base lang={lang} title={title}>
   <div id="compare">
     <p class="mb-1 text-xs tracking-widest text-subtle uppercase">
-      <a class="hover:text-fg-soft" href={url(`${lang}/compare/`)}>
+      <a
+        class="inline-flex min-h-11 items-center hover:text-fg-soft sm:min-h-0"
+        href={url(`${lang}/compare/`)}
+      >
         {ui.compareTitle}
       </a>
     </p>
@@ -44,7 +47,7 @@ const title = `${pair.a.data.term[lang]} ${ui.versus} ${pair.b.data.term[lang]}`
         type="button"
         data-copy-link
         data-copied={ui.linkCopied}
-        class="mt-1.5 rounded border border-border px-2 py-1 text-xs text-muted hover:border-border-hover hover:text-fg print:hidden"
+        class="mt-1.5 min-h-11 rounded border border-border px-3 py-1 text-sm text-muted sm:min-h-0 sm:px-2 sm:text-xs hover:border-border-hover hover:text-fg print:hidden"
       >
         <span data-label>{ui.copyLink}</span>
       </button>
@@ -84,7 +87,7 @@ const title = `${pair.a.data.term[lang]} ${ui.versus} ${pair.b.data.term[lang]}`
       <div class="flex flex-wrap gap-2">
         {shared.map((t) => (
           <a
-            class="rounded border border-border px-2 py-1 text-sm text-fg-soft hover:border-border-hover"
+            class="inline-flex min-h-11 items-center rounded border border-border px-2 py-1 text-sm text-fg-soft hover:border-border-hover sm:min-h-0"
             href={termUrl(lang, t.id)}
           >
             {t.data.term[lang]}
diff --git a/app/src/pages/[lang]/compare/index.astro b/app/src/pages/[lang]/compare/index.astro
index 09b8213c..8692def6 100644
--- a/app/src/pages/[lang]/compare/index.astro
+++ b/app/src/pages/[lang]/compare/index.astro
@@ -59,12 +59,13 @@ const multi = (s: (typeof sections)[number]) => s.clusters.length > 1;
 <Base lang={lang} title={ui.compareTitle}>
   <h1 class="mb-2 text-3xl font-semibold">{ui.compareTitle}</h1>
   <p class="mb-6 text-muted">{ui.compareIntro}</p>
-  <div class="sticky top-0 z-20 -mx-4 mb-6 border-b border-border bg-bg/95 px-4 py-3 backdrop-blur sm:-mx-6 sm:px-6">
+  {/* Sticky from sm up only: on a phone the wrapped chips + filter would pin ~140px. */}
+  <div class="z-20 -mx-4 mb-6 sm:sticky sm:top-0 border-b border-border bg-bg/95 px-4 py-3 backdrop-blur sm:-mx-6 sm:px-6">
     <nav class="mb-3 flex flex-wrap gap-2 text-sm" aria-label={ui.compareTitle}>
       {sections.map((s) => (
         <a
           href={`#${s.id}`}
-          class="flex items-center gap-2 rounded-full border border-border-strong px-3 py-1 text-fg-soft hover:border-border-hover"
+          class="flex min-h-11 items-center gap-2 rounded-full border border-border-strong px-3 py-1 text-fg-soft hover:border-border-hover sm:min-h-0"
         >
           <span
             aria-hidden="true"
@@ -83,7 +84,7 @@ const multi = (s: (typeof sections)[number]) => s.clusters.length > 1;
         data-compare-filter
         placeholder={ui.compareFilter}
         autocomplete="off"
-        class="w-full max-w-md rounded-md border border-border-strong bg-surface px-3 py-1.5 text-sm text-fg placeholder:text-subtle focus:border-border-hover focus:outline-none"
+        class="min-h-11 w-full max-w-md rounded-md border border-border-strong bg-surface px-3 py-1.5 sm:min-h-0 text-base text-fg placeholder:text-subtle sm:text-sm focus:border-border-hover focus:outline-none"
       />
     </label>
   </div>
@@ -91,7 +92,7 @@ const multi = (s: (typeof sections)[number]) => s.clusters.length > 1;
     {ui.compareNone}
   </p>
   {sections.map((s) => (
-    <section id={s.id} data-compare-group class="mb-10 scroll-mt-32">
+    <section id={s.id} data-compare-group class="mb-10 scroll-mt-4 sm:scroll-mt-32">
       <h2
         class="mb-4 flex items-center gap-2 border-l-4 pl-3 text-xl font-semibold"
         style={{ borderColor: s.colour, color: s.colour }}
@@ -120,7 +121,7 @@ const multi = (s: (typeof sections)[number]) => s.clusters.length > 1;
                   .toLowerCase()}
               >
                 <a
-                  class="text-fg hover:underline"
+                  class="inline-block py-2.5 text-fg hover:underline sm:py-0"
                   href={url(`${lang}/compare/${pairSlug(p.a, p.b)}/`)}
                 >
                   {p.a.data.term[lang]} <span class="text-subtle">{ui.versus}</span>{' '}
diff --git a/app/src/pages/[lang]/index.astro b/app/src/pages/[lang]/index.astro
index c7259477..43a81308 100644
--- a/app/src/pages/[lang]/index.astro
+++ b/app/src/pages/[lang]/index.astro
@@ -44,8 +44,10 @@ const ids = terms.map((t) => t.id);
     <h1 class="mb-2 text-4xl font-semibold tracking-tight">Atlas</h1>
     <p class="text-lg text-fg-soft">{ui.tagline}</p>
     <p class="mt-3 max-w-2xl text-muted">{ui.heroLead}</p>
-    <p class="mt-3 inline-flex items-center gap-2 rounded-full border border-border px-3 py-1 text-sm text-fg-soft">
-      <span aria-hidden="true">♥</span>
+    <p class="mt-3 flex items-start gap-2 rounded-xl border border-border px-3 py-2 text-sm text-fg-soft sm:inline-flex sm:items-center sm:rounded-full sm:py-1">
+      <span aria-hidden="true" class="shrink-0">
+        ♥
+      </span>
       {ui.freeForever}
     </p>
     <div class="mt-8">
@@ -91,25 +93,25 @@ const ids = terms.map((t) => t.id);
         id="random-term"
         href={termUrl(lang, ids[0])}
         data-ids={JSON.stringify(ids)}
-        class="rounded border border-border-strong px-3 py-1.5 text-fg-soft hover:border-border-hover hover:text-fg"
+        class="inline-flex min-h-11 items-center rounded border border-border-strong px-3 py-1.5 text-fg-soft hover:border-border-hover hover:text-fg sm:min-h-0"
       >
         ⚄ {ui.randomTerm}
       </a>
       <a
         href={url(`${lang}/explorer/`)}
-        class="rounded border border-border-strong px-3 py-1.5 text-fg-soft hover:border-border-hover hover:text-fg"
+        class="inline-flex min-h-11 items-center rounded border border-border-strong px-3 py-1.5 text-fg-soft hover:border-border-hover hover:text-fg sm:min-h-0"
       >
         {ui.explorer} →
       </a>
       <a
         href={url(`${lang}/study/`)}
-        class="rounded border border-border-strong px-3 py-1.5 text-fg-soft hover:border-border-hover hover:text-fg"
+        class="inline-flex min-h-11 items-center rounded border border-border-strong px-3 py-1.5 text-fg-soft hover:border-border-hover hover:text-fg sm:min-h-0"
       >
         {ui.study} →
       </a>
       <a
         href={url(`${lang}/terms/`)}
-        class="rounded border border-border-strong px-3 py-1.5 text-fg-soft hover:border-border-hover hover:text-fg"
+        class="inline-flex min-h-11 items-center rounded border border-border-strong px-3 py-1.5 text-fg-soft hover:border-border-hover hover:text-fg sm:min-h-0"
       >
         {UI_EXTRA[lang].azTitle} →
       </a>
diff --git a/app/src/pages/[lang]/review/index.astro b/app/src/pages/[lang]/review/index.astro
index 38d878aa..e54a45be 100644
--- a/app/src/pages/[lang]/review/index.astro
+++ b/app/src/pages/[lang]/review/index.astro
@@ -40,10 +40,16 @@ const editUrl = (id: string) => `${REPO}/edit/main/app/src/content/terms/${id}.y
           .sort((a, b) => a.data.term[lang].localeCompare(b.data.term[lang], lang))
           .map((t) => (
             <li class="flex flex-wrap items-baseline gap-x-3">
-              <a class="text-fg hover:underline" href={termUrl(lang, t.id)}>
+              <a
+                class="inline-flex min-h-11 items-center text-fg hover:underline sm:min-h-0"
+                href={termUrl(lang, t.id)}
+              >
                 {t.data.term[lang]}
               </a>
-              <a class="text-xs text-subtle hover:text-fg-soft" href={editUrl(t.id)}>
+              <a
+                class="inline-flex min-h-11 items-center text-xs text-subtle hover:text-fg-soft sm:min-h-0"
+                href={editUrl(t.id)}
+              >
                 {ui.editOnGitHub}
               </a>
             </li>
diff --git a/app/src/pages/[lang]/terms/[...slug].astro b/app/src/pages/[lang]/terms/[...slug].astro
index c707077a..3d0d25d5 100644
--- a/app/src/pages/[lang]/terms/[...slug].astro
+++ b/app/src/pages/[lang]/terms/[...slug].astro
@@ -162,7 +162,10 @@ const crumbs = [
           {crumbs.map((c, i) => (
             <li class="flex items-center gap-x-1.5">
               {i > 0 && <span aria-hidden="true">›</span>}
-              <a class="hover:text-fg-soft" href={c.href}>
+              <a
+                class="inline-flex min-h-11 items-center hover:text-fg-soft sm:min-h-0"
+                href={c.href}
+              >
                 {c.label}
               </a>
             </li>
@@ -175,7 +178,7 @@ const crumbs = [
           type="button"
           data-copy-link
           data-copied={ui.linkCopied}
-          class="mt-1.5 rounded border border-border px-2 py-1 text-xs text-muted hover:border-border-hover hover:text-fg print:hidden"
+          class="mt-1.5 min-h-11 rounded border border-border px-3 py-1 text-sm text-muted sm:min-h-0 sm:px-2 sm:text-xs hover:border-border-hover hover:text-fg print:hidden"
         >
           <span data-label>{ui.copyLink}</span>
         </button>
@@ -203,7 +206,10 @@ const crumbs = [
 
       {d.article?.[lang] && (
         <p class="mt-6">
-          <a class="text-fg underline hover:text-fg" href={url(`${lang}/articles/${term.id}/`)}>
+          <a
+            class="inline-flex min-h-11 items-center text-fg underline hover:text-fg sm:min-h-0"
+            href={url(`${lang}/articles/${term.id}/`)}
+          >
             {ui.readArticle}
           </a>
         </p>
@@ -242,7 +248,7 @@ const crumbs = [
               <li class="flex items-center gap-1">
                 {i > 0 && <span class="text-subtle">→</span>}
                 <a
-                  class="rounded border border-border px-2 py-1 text-fg-soft hover:border-border-hover"
+                  class="inline-flex min-h-11 items-center rounded border border-border px-2 py-1 text-fg-soft hover:border-border-hover sm:min-h-0"
                   href={termUrl(lang, n.id)}
                 >
                   {n.term[lang]}
@@ -276,7 +282,7 @@ const crumbs = [
                       }
                       title={r.why?.[lang]}
                       class:list={[
-                        'rounded border px-2 py-1 text-sm hover:border-border-hover',
+                        'inline-flex min-h-11 items-center rounded border px-2 py-1 text-sm hover:border-border-hover sm:min-h-0',
                         r.strength === 'primary'
                           ? 'border-border-hover text-fg'
                           : 'border-border text-fg-soft',
@@ -316,7 +322,7 @@ const crumbs = [
         <div class="mt-5 border-t border-border pt-3 text-muted" id="provenance">
           <h3 class="text-xs tracking-widest text-subtle uppercase">{deep.provenanceTitle}</h3>
           <p class="mt-1">{d.draft ? deep.provenanceDraft : deep.provenanceReviewed}</p>
-          <p class="mt-2 flex flex-wrap gap-x-4 gap-y-1 print:hidden">
+          <p class="mt-2 flex flex-wrap gap-x-4 gap-y-1 print:hidden [&>a]:inline-flex [&>a]:min-h-11 [&>a]:items-center sm:[&>a]:min-h-0">
             <a class="hover:text-fg-soft hover:underline" href={url(`${lang}/review/`)}>
               {deep.reviewQueue}
             </a>
@@ -335,7 +341,7 @@ const crumbs = [
           <div class="flex flex-wrap gap-2">
             {mentionedIn.map((n) => (
               <a
-                class="rounded border border-dashed border-border px-2 py-1 text-sm text-muted hover:border-border-hover"
+                class="inline-flex min-h-11 items-center rounded border border-dashed border-border px-2 py-1 text-sm text-muted hover:border-border-hover sm:min-h-0"
                 href={termUrl(lang, n.id)}
               >
                 {n.term[lang]}
@@ -384,7 +390,7 @@ const crumbs = [
       </div>
 
       <a
-        class="mt-2 inline-block text-sm text-muted hover:text-fg"
+        class="mt-2 inline-flex min-h-11 items-center text-sm text-muted hover:text-fg sm:min-h-0"
         href={url(`${lang}/explorer/?focus=${encodeURIComponent(term.id)}`)}
       >
         {ui.openExplorer}
diff --git a/app/src/pages/[lang]/terms/index.astro b/app/src/pages/[lang]/terms/index.astro
index 7825f2ec..2b562f4c 100644
--- a/app/src/pages/[lang]/terms/index.astro
+++ b/app/src/pages/[lang]/terms/index.astro
@@ -38,7 +38,7 @@ const anchor = (l: string) => `letter-${l === '#' ? 'other' : encodeURIComponent
   <nav class="mb-10 flex flex-wrap gap-2 text-sm" aria-label={x.azTitle}>
     {[...groups.keys()].map((l) => (
       <a
-        class="rounded border border-border px-2 py-1 text-fg-soft hover:border-border-hover"
+        class="inline-flex min-h-11 min-w-11 items-center justify-center rounded border border-border px-2 py-1 text-fg-soft hover:border-border-hover sm:min-h-0 sm:min-w-0"
         href={`#${anchor(l)}`}
       >
         {l}
diff --git a/app/src/pages/[lang]/timeline/index.astro b/app/src/pages/[lang]/timeline/index.astro
index c5c7e1cc..c78b425a 100644
--- a/app/src/pages/[lang]/timeline/index.astro
+++ b/app/src/pages/[lang]/timeline/index.astro
@@ -115,7 +115,9 @@ const panel = {
           />
         </div>
         <details class="mt-8 rounded-lg border border-border p-4">
-          <summary class="cursor-pointer text-sm text-fg-soft">{tl.listView}</summary>
+          <summary class="flex min-h-11 cursor-pointer items-center text-sm text-fg-soft sm:block sm:min-h-0">
+            {tl.listView}
+          </summary>
           <ol class="mt-4 space-y-6">
             {decades.map(({ decade, items: list }) => (
               <li class="list-none">
diff --git a/app/src/styles/global.css b/app/src/styles/global.css
index dde3647a..4fcfb561 100644
--- a/app/src/styles/global.css
+++ b/app/src/styles/global.css
@@ -160,6 +160,17 @@ main:focus,
   outline: none;
 }
 
+/* Phones: footer links are 44px tap targets. Direct children only: a utility like
+   `[&>*]` would also catch the <script> an island hoists into the footer and show it. */
+@media (max-width: 639.98px) {
+  [data-site-footer] > :is(a, button),
+  [data-site-footer] > astro-island > button {
+    display: inline-flex;
+    min-height: 2.75rem;
+    align-items: center;
+  }
+}
+
 /* The About dialog (A84): dimmed, blurred page behind; a short fade-in. */
 .about-dialog::backdrop {
   background: rgb(0 0 0 / 0.65);
diff --git a/design/AUTONOMOUS_DECISIONS.md b/design/AUTONOMOUS_DECISIONS.md
index f9c4eb92..1a1b0d28 100644
--- a/design/AUTONOMOUS_DECISIONS.md
+++ b/design/AUTONOMOUS_DECISIONS.md
@@ -155,6 +155,7 @@ Closed Vocabulary lint (E1) + full rule set; GitHub Pages deploy.
 | A95 | **Explorer overview types, meaning search in "Find a term", drag feedback** (owner-approved types; amends A93a). **Overview**: with nothing selected the map draws only kind-of, part-of, implements, requires, mitigates, exploits, causes, mandates and supersedes (`OVERVIEW_FAMILIES` in graph-layout.ts = the structure, dependency, security, regulation and lineage families; `backboneOf`'s default). *Used with*, *contrasts with* and *alternative to* start unticked in the Relationships popover (its one line says which types the overview starts with, EN+DA); a selected term still shows all its relationships. **Find a term** behaves like the home search: instant name and alias matches (aliases now ride in `graph.json` when a term has any), and for a question or description the `semantic-search` function's near-best hits, fused by RRF and labelled "by meaning"; the debounced, abortable client is one hook (`use-semantic.ts`) and the fusion one pure function (`mergeHits`), both shared with the home search; without a backend, or on failure or timeout, names only. Picking a result selects the term and brings it into view (also when it is already selected; the 3D camera cuts instead of gliding under reduced motion). **Drag feedback** (`drag-feedback.ts`): an open hand at rest, a closed hand while panning (2D, 3D right or modified drag), a light rotate-arrow cursor while orbiting (3D), and a light ring with a crosshair and a dark outline following the mouse while dragging (not on touch; no fade under reduced motion); Cytoscape's dark press disc is switched off. Tunables in `EXPLORER.drag`. **About "i"**: hidden while the term panel is expanded, so it never covers the panel's own controls. | The overview read as a hairball of symmetric links; the owner picked the types that carry structure. A search box that only knew names disagreed with the home search. The old press marker was a dark disc on a dark map: dragging gave no visible feedback. |
 | A96 | **A hidden visual lab for the Explorer** at `/<lang>/lab/5f69d757b126/2d/` and `/3d/` (EN + DA; noindex so out of the sitemap, linked from nowhere, no tour, like A91), so the owner can see and measure old visual effects live without deploying test branches. Each page renders the real `Explorer` (bar, legend, About "i", term panel unchanged) and a floating **Lab** panel whose toggles restyle in place, never relayout. **2D**: backbone curve (straight haystack, today / bezier / unbundled-bezier from the edge's own offset × a strength slider), source-to-target domain-colour gradients, one-way flow (overlay dots, today / the old Cytoscape `line-dash-offset` marching dashes on every visible one-way edge / none) with a speed slider, hover (today / the old `attachHover` that restyles every element, plus the old fade transitions), node glow, "show all", label density (none / hubs / culled, today / all) and the viewport snapshot. **3D**: merged lines (today) or a tube and arrow cone per link (old), link curvature (re-bends the merged web and the comets too), flow (comets, today / the old per-link particles / none) with speed, glow (point cloud, today / a sprite per term, old), bloom (`UnrealBloomPass` + `OutputPass` and an opaque scene background, else the transparent canvas turns grey), auto-rotate, fog, node spacing (the scene scales about its centre while terms and labels keep their size). **Meter**: rAF-based, current fps, 1% low (1000 / 99th-percentile frame time) and the longest frame over the last 5 s; **Benchmark** runs a scripted 5 s pan and zoom (2D, straight through `cy.viewport`, so every frame is a full redraw: the snapshot only applies to user gestures) or one orbit (3D) and reports the average fps and the active toggles. Toggles start from the address (`?curve=bezier&gradient=1&bench=1`), so a headless run is a list of URLs; nothing is stored (no new storage keys). **Production hook, optional and inert by default**: `Explorer` takes `lab?: { mode, showAll, onMaps }`; `createMap2D` returns `lab.dots` (a live copy of `EXPLORER.dots`) and `setDots`, `startDots` takes that copy; `createMap3D` returns `lab` (its three.js objects, the flow settings copy, the curve buffer and its link predicates). Old effects live in `ExplorerLab.tsx` / `explorer-lab.ts`, not behind production flags. **Measured** (headless Edge, 1440×900, 2× CPU throttle, RTX 3080; the PR has the table): 2D scripted pan and zoom (full redraws) ≈13 fps today, curves or gradients ≈11, marching dashes ≈9, all three ≈7, "show all" + dashes ≈5, no flow ≈16; 3D orbit 60 today, tubes ≈13, per-link particles ≈25, sprite glow ≈33, bloom 59 (1% low 30), tubes + particles + sprites ≈8. **Later additions (owner)**: the lab follows the page theme through the maps' own `retheme` (it re-reads the restyled base and lays its rules over it again; bloom is off on the cream map, where it only washes out); **emphasis by importance** (both views): importance = a per-type rank (requires, kind of, part of 1.0; mitigates, exploits, causes, mandates 0.85; implements, supersedes 0.7; contrasts with, alternative to 0.5; used with 0.35) × the square root of the link's own `weight` normalised to the heaviest, shown as opacity, colour (saturation and lightness towards the background), width (2D and 3D tubes) or all three, with a spread slider (importance ^ spread); **relayout** (lab only): a minimum-distance slider that re-runs the spacing pass (`createMap2D` keeps each island's fcose result and exposes `lab.relayout`; 3D re-spaces from the original layout) and sub-domain clusters (2D: islands 0.8 × and 70 px further apart; 3D: clusters 1.4 × out from their domain's centre and 0.7 × tighter, with optional faint cluster names); **cream-map contrast** sliders (term saturation / lightness, edge darkness / opacity, shadow strength, 2D label weight / halo) with a "Copy values" button. 3D exposes inert `webGain` / `webTint` per link, `linkLength`, `radius` and `labels` for these. | The owner wants to judge effects by eye and by frame rate before choosing; a lab that reuses the real component measures the real cost, and keeping the old code paths out of production keeps the Explorer diff to a few inert lines. |
 | A97 | **Explorer: keyboard navigation (WASD) and 3D lines behind receded terms** (owner requests). **3D draw order**: every sphere is transparent (`nodeOpacity` 0.95), so three.js sorted each against the one merged web by distance, and a receded sphere (dimmed by a selection, hover or route) that happened to draw first wrote depth and erased every line behind it; only comets and glow showed through. Now a fixed `renderOrder`: glow, solid spheres (they still write depth, so they hide what is behind them), lines (the web and 3d-force-graph's focused links), receded spheres (no depth write, below `EXPLORER.three.solidOpacity`), comets. The sphere materials are 3d-force-graph's and swapped on its schedule, so a `scene.onBeforeRender` pass sets this each frame. **Keys** (`explorer-keys.ts`, unit-tested): held keys give a target velocity (opposite keys cancel, Shift ×3), eased exponentially (frame-rate independent; no easing under reduced motion). 2D: W A S D / arrows pan, Q/E or -/+ zoom about the centre of the part the panel leaves clear. 3D: W/S forward and back (towards the orbit centre, pushing it on ahead once `near`), A/D sideways and Q/E (Space: up) down and up, both moving the orbit centre with the camera, arrows orbit; the OrbitControls target stays in sync, so a mouse orbit afterwards turns about what is in front. Letters and arrows by physical key (`code`), + and - by character (Danish layout). **Ctrl as "down" is left out**: Ctrl+W closes the tab and Ctrl+drag pans. Keys act only when focus is inside the map host (now `tabindex=0`, `role="application"`, a "use W A S D" `aria-label`) or nothing has focus and the pointer is over the map; never with Alt/Ctrl/Cmd, and never in a field, the bar, a popover or the term panel (whose ←/→ keep stepping through connections). Held keys clear on blur and when the tab is hidden. The open legend ends with a one-line key hint for the current view (EN+DA; the term page's legend has none). Tunables in `EXPLORER.keys`. **Measured** (headless Edge, 1440×900, 2× CPU throttle, before/after): 2D pan 46/49, zoom 46/54, hover 59/59; 3D orbit 49/60, idle 59/59, hover 59/54 (run-to-run noise). | The owner asked for game-like movement; physical keys keep WASD on any layout. The focus/pointer guard keeps the map from taking keys meant for anything else. |
+| A98 | **Mobile pass: 44px tap targets below `sm`/`md`, a BETA badge instead of the ribbon on phones, dvh + safe areas, 16px inputs.** An emulated audit (Edge, 390x844 / 360x800 / 768x1024, touch, both themes and languages) found no horizontal overflow but undersized controls everywhere. (1) **BETA**: the fixed corner ribbon is `md` and up only; below that a small amber badge sits next to the logo, so nothing covers content, the tour pill or the timeline popover. (2) **Tap targets**: header buttons, menu items, chips, quiz and status buttons, footer links and page links get `min-h-11` (44px) on phones and are reset at `sm`/`md`, so desktop is unchanged. Footer links use a `[data-site-footer]` rule in `global.css`, not `[&>*]`, which would also display the `<script>` an island hoists into the footer. (3) **Viewport**: `viewport-fit=cover`, `min-h-dvh` body, `60dvh` tour card, a scrollable mobile menu and search list (`dvh`), and `env(safe-area-inset-*)` on back-to-top, the tour pill and the timeline popover. (4) **Inputs** are 16px on phones (no iOS focus zoom). (5) **Compare index**: its chip bar is sticky from `sm` only (it pinned about 140px of a phone). (6) **Vertical timeline** rows 20px to 24px (the WCAG 2.5.8 minimum) with 11px names; a 44px row would triple its height, so full-size targets stay with the list view. (7) The "press /" hint hides on touch (`pointer-coarse`). Eyebrow headings (12px uppercase) are a design choice and unchanged. Explorer files were not touched; their mobile findings are follow-ups in the PR. |
 
 Add rows as further solo decisions are made.