Accessibility settings, deferred scripts, and offline reading of tasks, notes, recipes, calendar and contacts

Keeps saved episodes and shares when the app updates (they were being deleted with the old shell cache).

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

public/themes.js

@@ -15,6 +15,11 @@ function themeApply() {
   const hex = dark ? acc[3] : acc[2];
   if (acc[0] === 'blue' && mode === 'auto') { root.style.removeProperty('--accent'); root.style.removeProperty('--accent-t'); }
   else { const n = parseInt(hex.slice(1), 16), lum = (0.299 * (n >> 16) + 0.587 * ((n >> 8) & 255) + 0.114 * (n & 255)) / 255; root.style.setProperty('--accent', hex); root.style.setProperty('--accent-t', lum > .6 ? '#0b1020' : '#fff'); }
+  const hc = !!store.get('a11y_contrast', false), size = +store.get('a11y_text', 1) || 1;
+  const HC = dark ? { '--text': '#ffffff', '--muted': '#d3d8e2', '--line': '#7a8294' } : { '--text': '#000000', '--muted': '#33383f', '--line': '#6c7482' };
+  for (const k of Object.keys(HC)) { if (hc) root.style.setProperty(k, HC[k]); else if (mode === 'auto') root.style.removeProperty(k); else root.style.setProperty(k, THEME_VARS[mode][k]); }
+  root.classList.toggle('hc', hc); root.classList.toggle('rm', !!store.get('a11y_motion', false));
+  const view = document.getElementById('view'); if (view) view.style.zoom = size === 1 ? '' : String(size); // larger text and controls for the page itself
   root.style.colorScheme = mode === 'auto' ? '' : dark ? 'dark' : 'light';
   const m = document.querySelector('meta[name=theme-color]'); if (m) m.content = dark ? (mode === 'amoled' ? '#000000' : '#0f1115') : (mode === 'light' ? '#f5f6f8' : m.content);
 }
@@ -23,10 +28,17 @@ function themeSettings(el) {
   if (!el) return;
   const draw = () => {
     const mode = store.get('theme_mode', 'auto'), acc = store.get('theme_accent', 'blue');
-    el.innerHTML = `<h2>Look</h2><p class="sub">Saved for you and used on every device you sign in on.</p>
+    el.innerHTML = `<h2>Look and reading</h2><p class="sub">Saved for you and used on every device you sign in on.</p>
       <div class="seg" role="radiogroup" aria-label="Brightness">${THEME_MODES.map(([k, l]) => `<a href="#" role="radio" aria-checked="${mode === k}" data-m="${k}" class="${mode === k ? 'on' : ''}">${l}</a>`).join('')}</div>
       <div class="swatches" role="radiogroup" aria-label="Accent colour">${THEME_ACCENTS.map(([k, l, c]) => `<button type="button" role="radio" aria-checked="${acc === k}" aria-label="${l}" title="${l}" data-a="${k}" class="${acc === k ? 'on' : ''}" style="background:${c}"></button>`).join('')}</div>
+      <h3 class="sub" style="margin:14px 0 0">Reading</h3>
+      <div class="seg" role="radiogroup" aria-label="Text size">${[[1, 'Normal'], [1.15, 'Large'], [1.3, 'Extra large']].map(([v, l]) => `<a href="#" role="radio" aria-checked="${+store.get('a11y_text', 1) === v}" data-ts="${v}" class="${+store.get('a11y_text', 1) === v ? 'on' : ''}">${l}</a>`).join('')}</div>
+      <div class="list"><label class="row" style="cursor:pointer"><span class="grow"><b>High contrast</b><small>Stronger text and borders</small></span><input type="checkbox" id="a11yhc"${store.get('a11y_contrast', false) ? ' checked' : ''}></label>
+        <label class="row" style="cursor:pointer"><span class="grow"><b>Reduce motion</b><small>Fewer animations, whatever the device says</small></span><input type="checkbox" id="a11yrm"${store.get('a11y_motion', false) ? ' checked' : ''}></label></div>
       <h3 class="sub" style="margin:14px 0 0">My colour on shared calendars</h3><div class="swatches" role="radiogroup" aria-label="My colour on shared calendars">${(typeof ME !== 'undefined' && ME ? THEME_PERSON : []).map(c => `<button type="button" role="radio" aria-checked="${ME.color === c}" aria-label="${c}" data-pc="${c}" class="${ME.color === c ? 'on' : ''}" style="background:${c}"></button>`).join('')}</div>`;
+    el.querySelectorAll('[data-ts]').forEach(a => a.onclick = e => { e.preventDefault(); store.set('a11y_text', +a.dataset.ts); themeApply(); draw(); });
+    el.querySelector('#a11yhc').onchange = e => { store.set('a11y_contrast', e.target.checked); themeApply(); };
+    el.querySelector('#a11yrm').onchange = e => { store.set('a11y_motion', e.target.checked); themeApply(); };
     el.querySelectorAll('[data-pc]').forEach(b => b.onclick = async () => { try { const r = await jfetch('/api/me/color', { method: 'POST', headers: { 'content-type': 'application/json' }, body: JSON.stringify({ color: b.dataset.pc }) }); ME.color = r.color; try { localStorage.setItem('me_cache', JSON.stringify(ME)); } catch {} draw(); } catch (e) { toast(e.message); } });
     el.querySelectorAll('[data-m]').forEach(a => a.onclick = e => { e.preventDefault(); store.set('theme_mode', a.dataset.m); themeApply(); draw(); });
     el.querySelectorAll('[data-a]').forEach(b => b.onclick = () => { store.set('theme_accent', b.dataset.a); themeApply(); draw(); });