/* =================================================================== DATE DISPLAY — DD/MM/YYYY over a native date picker A native paints its own text in the browser's locale: an Indian Chrome writes "02-Sep-2026", a US one "9/2/2026". No attribute, and no CSS, reaches that text. The same goes for a datetime-local field, which these rules cover as well. So the picker is left exactly as it is — same control, same calendar button, same yyyy-MM-dd value posted to the server — and only the text it draws is covered over, with the date written out as DD/MM/YYYY instead. Opt a field in with class "dmy-date"; date-display.js does the rest. Everything here hangs off .dmy-masked, which that script sets on only where ::-webkit-datetime-edit is understood (Chrome, Edge, Safari). Anywhere else — Firefox — not one of these rules applies and the field is left exactly as the browser draws it. =================================================================== */ /* The native text goes, the calendar button stays. Hidden whether or not the field has focus, so the date never changes shape under the person reading it. Keyed on .is-dmy-ready, which the script adds only once the overlay has been measured and placed over this field. Without that guard a field the script had not reached — one injected with a modal — would have its native text hidden with nothing put in its place; and one that could not be measured would show our text parked at its static position, beside the box rather than on it. Either way the field simply keeps the date the browser drew until ours is truly over it. */ .dmy-masked .dmy-date.is-dmy-ready::-webkit-datetime-edit { opacity: 0; } .dmy-date__text { display: none; } /* Placed and sized from the input's own computed style, so this holds whatever height, padding or border the field happens to carry. */ .dmy-masked .dmy-date__text { display: flex; align-items: center; position: absolute; white-space: nowrap; overflow: hidden; /* Every click belongs to the input underneath — the calendar button included. */ pointer-events: none; border-color: transparent; border-style: solid; } /* An empty field says nothing at all once the browser's own "dd-mm-yyyy" is hidden, which reads as broken rather than blank. It names the format instead, in the placeholder grey. */ .dmy-masked .dmy-date__text.is-empty { color: var(--clr-muted, #8a9bb0); } /* The overlay is positioned against the nearest positioned ancestor, so a field that is not already one has to become one. Wrapping the input instead would break the ~ sibling selectors that float the label off it. */ .dmy-date-host { position: relative; }