/* One date per row, three equally sized choices. Uses the existing form colours. */
.datum-row { min-width: 0; border: 0; margin: 0; padding: 0 0 14px; }
.datum-row:last-child { padding-bottom: 0; }
.datum-row legend { padding: 0 0 8px; font: 600 14px/1.45 var(--sans); color: var(--ink); }
.datum-options { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.datum-choice { position: relative; min-width: 0; cursor: pointer; }
.datum-choice input { position: absolute; opacity: 0; pointer-events: none; }
.datum-choice span { display: flex; align-items: center; justify-content: center; min-height: 46px; padding: 8px 4px; border-radius: 12px; background: #F0EEEA; color: var(--ink); font: 500 14px/1.3 var(--sans); }
.datum-choice:has(input:checked) span { background: var(--ink); color: #fff; }
.datum-choice:has(input:focus-visible) span { outline: 2px solid var(--ink); outline-offset: 3px; }
.datum-choice:active span { box-shadow: inset 0 0 0 2px var(--ink); }