feat: mobile experience overhaul — touch targets, calendar mobile layout, swipe gestures

src/app/globals.css

@@ -1424,3 +1424,90 @@ select {
 .animate-emoji-float {
   animation: emojiFloat 1.8s ease-out both;
 }
+
+/* ── Calendar min-height CSS variable ───────────────────────────── */
+/* Used by calendar-shell so the grid fills the viewport correctly  */
+/* on both desktop (topbar only) and mobile (topbar + bottom nav).  */
+:root {
+  --cal-topbar-h: 57px;
+  --cal-nav-h: 0px;
+}
+:where(html[data-nav="bottom"]),
+:where(html[data-nav="fab"]) {
+  --cal-nav-h: 62px;
+}
+
+/* ── Mobile overrides (≤ 759 px) ────────────────────────────────── */
+@media (max-width: 759px) {
+  /* Prevent iOS Safari from zooming into inputs (requires ≥ 16 px) */
+  .input,
+  input,
+  select,
+  textarea {
+    font-size: 16px;
+  }
+
+  /* Topbar: tighten padding; avatar is redundant (Settings in bottom nav) */
+  .topbar {
+    padding: 10px 14px;
+    gap: 8px;
+  }
+  .topbar-actions > .avatar {
+    display: none;
+  }
+
+  /* Keyboard shortcut hints are meaningless on touch */
+  .kbd {
+    display: none;
+  }
+
+  /* Eliminate 300 ms tap delay on interactive controls */
+  .btn,
+  .checkbox,
+  .nav-item,
+  .list-row,
+  .fab,
+  .bottom-nav button,
+  .bottom-nav a {
+    touch-action: manipulation;
+  }
+
+  /* Momentum scrolling + prevent page bounce fighting in-app scroll */
+  .scroll-area {
+    -webkit-overflow-scrolling: touch;
+    overscroll-behavior-y: contain;
+  }
+
+  /* Checkbox: keep the 18 px visual but expand the tap area to 44 px */
+  .checkbox {
+    position: relative;
+    flex-shrink: 0;
+  }
+  .checkbox::after {
+    content: "";
+    position: absolute;
+    inset: -13px; /* 18 + 2×13 = 44 px tap target */
+  }
+
+  /* Delete button on list rows: always visible on touch (no hover state) */
+  .list-row-delete {
+    opacity: 1 !important;
+  }
+}
+
+/* Landscape phone: compress bottom nav to icon-only to reclaim vertical space */
+@media (max-width: 759px) and (orientation: landscape) and (max-height: 500px) {
+  .bottom-nav {
+    height: 44px;
+    padding: 2px 8px env(safe-area-inset-bottom, 2px);
+  }
+  .bottom-nav .nav-label {
+    display: none;
+  }
+  :where(html[data-nav="bottom"]) .scroll-area {
+    padding-bottom: 52px;
+  }
+  .fab {
+    bottom: 50px !important;
+  }
+}