Custom date and time pickers that follow the configured format

Browsers render <input type="date"> and datetime-local in their own locale and
ignore the page's, so #1 left a German user on an English browser reading
22.11.2025 everywhere but still entering dates through an mm/dd/yyyy widget.
#3 makes the case that people use the picker rather than typing, which is
where the AM/PM mistakes happen.

New DateField and DateTimeField (web/src/ui/datefield.tsx) replace all nine
native controls — event editor (all-day and timed start/end, recurrence
until), out-of-office, contact birthday, advanced search. They take and emit
the same ISO strings the native inputs did, so call sites barely changed.

Each is a text box in the configured order plus a popover: a month grid
(week start from settings, locale weekday and month names, today and the
selection marked) and, for date-times, a list of times in the configured
clock. Keyboard: arrows move by day, PageUp/PageDown by month, Home/End
across the week, Enter picks, Escape closes, ArrowDown opens; the focused day
holds DOM focus so screen readers follow, and the dialog has an accessible
name (Popover gained an ariaLabel prop).

Text entry is lenient — the configured order with any separator, unseparated
digits (221125), day and month alone, non-Latin digits, and bare ISO always;
times take 18:23, 1823, 6:23pm, 930. What will not parse reverts on blur
rather than clearing the field, and impossible dates like 31 February are
rejected instead of rolling into March.

Editable boxes stay Gregorian and Latin-digit even where display does not
(fa-IR, th-TH, ar-EG): the locale's field order and separator are kept, but a
Buddhist-era year in a text box cannot round-trip against a Gregorian grid.
Noted in the README.

The out-of-office format echo added in #2 is gone — the fields now show the
right format themselves.

Closes #3

web/src/styles/app.css

@@ -850,3 +850,39 @@ img { max-width: 100%; }
 @media (prefers-reduced-motion: reduce) {
   *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
 }
+
+/* ---- Date & time fields (custom pickers; see ui/datefield.tsx) ---- */
+.dp-field { position: relative; display: inline-flex; align-items: center; width: 100%; }
+.dp-field .input { width: 100%; padding-right: 30px; }
+.dp-open { position: absolute; right: 4px; display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; border: 0; background: none; color: var(--fg-muted); cursor: pointer; border-radius: var(--radius-sm); }
+button.dp-open:hover { background: var(--bg-hover); color: var(--fg); }
+button.dp-open:disabled { cursor: default; opacity: .5; }
+.dp-field.w-auto { width: auto; }
+.dp-field.w-auto .input { width: 10em; }
+.dp-datetime { display: flex; gap: 6px; align-items: center; }
+.dp-datetime .dp-field { flex: 1 1 auto; }
+.dp-datetime .dp-time-field { flex: 0 0 8.5em; }
+.dp-pop { padding: 10px; }
+.dp-pop-wide { display: flex; }
+.dp-split { display: flex; gap: 10px; align-items: stretch; }
+.dp-cal { width: 15.5em; }
+.dp-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px; font-weight: 650; }
+.dp-dow, .dp-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; text-align: center; }
+.dp-dow { color: var(--fg-faint); font-size: .8em; padding-bottom: 2px; }
+.dp-day { height: 28px; border: 0; background: none; color: inherit; font: inherit; font-size: .9em; border-radius: 50%; cursor: pointer; }
+.dp-day:hover { background: var(--bg-hover); }
+.dp-day:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
+.dp-day.other { color: var(--fg-faint); }
+.dp-day.today { font-weight: 700; color: var(--accent); }
+.dp-day.selected { background: var(--accent); color: var(--accent-fg); font-weight: 600; }
+.dp-foot { display: flex; justify-content: space-between; margin-top: 6px; }
+.dp-times { display: flex; flex-direction: column; gap: 1px; overflow-y: auto; max-height: 17em; min-width: 7.5em; border-left: 1px solid var(--border); padding-left: 8px; }
+.dp-time { border: 0; background: none; color: inherit; font: inherit; font-size: .9em; text-align: left; padding: 4px 8px; border-radius: var(--radius-sm); cursor: pointer; white-space: nowrap; }
+.dp-time:hover { background: var(--bg-hover); }
+.dp-time.selected { background: var(--accent); color: var(--accent-fg); }
+@media (max-width: 480px) {
+  .dp-datetime { flex-wrap: wrap; }
+  .dp-datetime .dp-time-field { flex: 1 1 100%; }
+  .dp-split { flex-direction: column; }
+  .dp-times { flex-direction: row; overflow-x: auto; max-height: none; border-left: 0; border-top: 1px solid var(--border); padding: 6px 0 0; }
+}