Make the app work better on iPhone and iPad

- Text fields are at least 16px on touch screens (stops iOS zooming on focus)
- Chapter swipe ignores sheets, fields, sliders, sideways-scrolling rows and text selection
- vh -> dvh for sheets, palette and dialogs
- Bigger tap targets for small links, chips and the logo; no double-tap delay
- No tap flash or landscape text inflation

Co-Authored-By: Claude Sonnet 5.5 <noreply@anthropic.com>

src/index.css

@@ -31,6 +31,51 @@ select {
   font: inherit;
 }
 
+/* iPhone and iPad: don't inflate text when the phone is turned sideways, no grey flash on tap, and no
+   double-tap-to-zoom delay on controls. */
+html {
+  -webkit-text-size-adjust: 100%;
+  text-size-adjust: 100%;
+  -webkit-tap-highlight-color: transparent;
+}
+button,
+a,
+select,
+summary,
+label,
+input,
+[role='button'],
+[role='tab'],
+[role='option'],
+[role='menuitem'] {
+  touch-action: manipulation;
+}
+
+/* iOS Safari zooms the whole page when a text field under 16px gets focus (and doesn't zoom back).
+   On touch screens, text fields are at least 16px. */
+@media (pointer: coarse) {
+  input:not([type='checkbox']):not([type='radio']):not([type='range']):not([type='color']):not([type='file']):not([type='button']):not([type='submit']),
+  select:not([data-keep-size]),
+  textarea:not([data-keep-size]) {
+    font-size: max(16px, 1em);
+  }
+
+  /* Small text links and buttons (no padding of their own) get a finger-sized height. */
+  :is(button, a).text-xs:not([class^='p-'], [class^='py-'], [class*=' p-'], [class*=' py-']) {
+    padding-block: 0.55rem;
+  }
+
+  /* Small pill buttons (tags, chips) keep their look but get a bigger area to tap. */
+  :where(button.rounded-full) {
+    position: relative;
+  }
+  :where(button.rounded-full)::after {
+    content: '';
+    position: absolute;
+    inset: -7px -3px;
+  }
+}
+
 /* Top bars leave room for the status bar / notch when the app is installed or full-screen
    (env() is 0 in an ordinary browser tab). */
 .safe-top {