From de37f2a0bba051d637ad5589bd1355d3fbd14614 Mon Sep 17 00:00:00 2001
From: CMaintz <Cmaintz@outlook.com>
Date: Fri, 25 Sep 2026 22:56:47 +0200
Subject: [PATCH] fix(mobile): 44px tap targets, BETA badge on phones,
 dvh/safe-area, 16px inputs (A98)

Emulated mobile audit (Edge; 390x844, 360x800, 768x1024; touch; both themes and
languages). No horizontal overflow before or after; undersized controls fixed with
phone-only min-h-11 (reset at sm/md so desktop is unchanged). The corner BETA ribbon
is md+ only; phones get a header badge. Explorer files untouched (follow-ups in PR).
---
 app/src/components/AboutButton.tsx            |  4 +-
 app/src/components/Account.tsx                |  4 +-
 app/src/components/AccountMenu.tsx            |  4 +-
 app/src/components/KnowledgeStatus.tsx        |  2 +-
 app/src/components/Quiz.tsx                   |  8 +--
 app/src/components/RecentTerms.tsx            |  8 ++-
 app/src/components/Search.tsx                 |  7 ++-
 app/src/components/StudyHub.tsx               |  4 +-
 app/src/components/Timeline.tsx               | 25 +++++----
 app/src/components/Tour.tsx                   | 18 +++---
 app/src/layouts/Base.astro                    | 56 +++++++++++++------
 app/src/pages/404.astro                       |  8 +--
 app/src/pages/[lang]/articles/[...slug].astro |  7 ++-
 app/src/pages/[lang]/compare/[pair].astro     |  9 ++-
 app/src/pages/[lang]/compare/index.astro      | 11 ++--
 app/src/pages/[lang]/index.astro              |  8 +--
 app/src/pages/[lang]/review/index.astro       | 10 +++-
 app/src/pages/[lang]/terms/[...slug].astro    | 22 +++++---
 app/src/pages/[lang]/terms/index.astro        |  2 +-
 app/src/pages/[lang]/timeline/index.astro     |  4 +-
 app/src/styles/global.css                     | 11 ++++
 design/AUTONOMOUS_DECISIONS.md                |  1 +
 22 files changed, 149 insertions(+), 84 deletions(-)

diff --git a/app/src/components/AboutButton.tsx b/app/src/components/AboutButton.tsx
index ac24148..8f7807d 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 a32eea6..3c9157b 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 574ca8b..1292340 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 d9ab383..3b49756 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 23856f1..dea18b4 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 eb00258..bdf16ae 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 a0d814a..be2e376 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 9045248..89bc704 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 2a81a3c..7aaf029 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 5eecb2a..ecea646 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 956f208..5ac9d38 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 65ca554..5946577 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 509d42e..df231f6 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 7cb6460..9966b73 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 09b8213..8692def 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 c725947..5bcb39b 100644
--- a/app/src/pages/[lang]/index.astro
+++ b/app/src/pages/[lang]/index.astro
@@ -91,25 +91,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 2fe12a1..75c1887 100644
--- a/app/src/pages/[lang]/review/index.astro
+++ b/app/src/pages/[lang]/review/index.astro
@@ -43,10 +43,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 c707077..3d0d25d 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 7825f2e..2b562f4 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 c5c7e1c..c78b425 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 dde3647..4fcfb56 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 4133019..86060f1 100644
--- a/design/AUTONOMOUS_DECISIONS.md
+++ b/design/AUTONOMOUS_DECISIONS.md
@@ -153,6 +153,7 @@ Closed Vocabulary lint (E1) + full rule set; GitHub Pages deploy.
 | A93a | **Explorer layout fix** (owner, amends A93): the legend moves to the map's top-left corner, level with the bar (collapsed to a pill, drops down to 60vh when open), and the bar is centred between equal `md:left-36 md:right-36` insets that clear it (sized for the Danish "Forklaring") and the About "i"; on phones the bar drops below the pill; the bar no longer moves when the term panel opens (only the "i" slides), the panel simply sits above it. **Colour by** is an inline Cluster | My knowledge toggle in the bar (no popover), so the bar never changes size. **Relationship types filter the overview only**: a selected term always shows all its relationships (2D, 3D and its neighbourhood); every type starts on except *used with* (amended by A95: contrasts and alternatives start off too); the backbone is recomputed over the types switched on (`backboneOf`), so an off type no longer takes a term's strongest-link slots; one line in the Relationships popover says so. The term panel keeps a single "Read more" (its toolbar). **One-row bar** (≈720 px at 1440): domain toggles are dot-only chips (name in tooltip and aria-label; labelled in the phone sheet), tighter segments, a short "Links" button, and "Find a term" is a search icon that opens the field (Esc or blur when empty closes it). With the panel docked the "i" also drops below the bar row, so it never covers the bar; while the legend is open the bar sits right of it (`md:left-[18rem]`), and on phones the legend sits below the bar. | The legend looked adrift mid-left; a bar that jumps when a term opens is disorienting. |
 | A94 | **No em or en dashes anywhere a reader sees them** (owner rule). Every U+2014 em dash, U+2013 en dash and U+2015 horizontal bar in terms (all fields), articles, the question bank and the UI strings (`site.ts`, `privacy.ts`, `ui-extra.ts`, page titles " - Atlas", the empty-value placeholder, screen-reader announcements, inline page text) became hyphen-minus: " - " between clauses, "2018-2020" in ranges, "-" as a placeholder. The swap was mechanical (one character for one, verified by re-parsing every YAML file and frontmatter and checking no Markdown line turned into a list item or rule), not a per-sentence rewrite. **Guards**: lint **E12** fails on any of the three in a `src/content/**/*.{yaml,md}` file (raw text, so every field counts), and `ui-strings.test.ts` walks the exported values of `site`, `privacy`, `ui-extra`, `about` and `tour` (values, not source, so code comments may keep theirs). Components and pages are not unit-scanned; the Explorer files being reworked at the time (`Explorer.tsx`, `GraphLegend.tsx`, `AboutButton.tsx`, `explorer/index.astro`) are a follow-up. | The owner wants only normal dashes. One-for-one replacement keeps the diff reviewable and the text meaning intact; a lint rule and a string test stop them creeping back in from authoring tools that auto-convert "--". |
 | 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. |
+| 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.