A date typed in the order you chose, not the browser's

Settings › Date format steered every date the app printed, but not one it
asked for: `<input type="date">` renders in the browser's own locale and no
page setting can move it, so DD-MM-YYYY tables sat above 08/22/2026 boxes.

DateField takes over the typing half — a masked box whose segment order comes
from the same prefs.dateFormat lib/format.js reads — and leaves the picking
half to the browser, behind a calendar button. The value in and out stays ISO,
so no caller changed. Native validation now also catches a full-but-impossible
date; the old input let a half-typed one through as no date at all.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>

Web App/web/src/style.css

@@ -324,6 +324,43 @@ body {
     box-shadow: var(--shadow-focus);
   }
 
+  /* DateField: the browser's picker parked out of sight behind the calendar
+     button, so the visible box can keep the user's own segment order. Not
+     display:none — showPicker() needs a rendered element to open against. */
+  .dv-date-picker {
+    position: absolute;
+    right: 0.5rem;
+    bottom: 0;
+    width: 1px;
+    height: 1px;
+    padding: 0;
+    border: 0;
+    opacity: 0;
+    pointer-events: none;
+  }
+  .dv-date-open {
+    position: absolute;
+    top: 50%;
+    right: 0.25rem;
+    transform: translateY(-50%);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding: 0.25rem;
+    border-radius: var(--radius-control);
+    color: var(--text-muted);
+    transition: color 0.15s, background 0.15s;
+  }
+  .dv-date-open:hover {
+    color: var(--text-strong);
+    background: var(--surface-sunken);
+  }
+  .dv-date-open:focus-visible {
+    outline: none;
+    color: var(--text-strong);
+    box-shadow: var(--shadow-focus);
+  }
+
   .dh-label {
     display: block;
     margin-bottom: 0.375rem;