/* Date field (design system components/date-field): a text box that takes a
 * typed date, with the app calendar (components/date-picker) as its picker,
 * as a popover under the box or inline beneath it. Loaded by the layout. */
.cpv1-datefield { position: relative; display: inline-block; vertical-align: middle; }
.cpv1-datefield--inline { display: block; }
.cpv1-datefield-input { width: 132px; padding: 4px 9px; font: inherit; font-size: 13px; line-height: 1.3; border: 1px solid var(--color-slate-300); border-radius: var(--r-input, 3px); background: var(--surface, #fff); color: var(--fg); }
.cpv1-datefield-input:hover { border-color: var(--color-slate-400); }
.cpv1-datefield-input:focus { outline: 2px solid var(--color-blue-700); outline-offset: 1px; border-color: var(--color-slate-400); }
.cpv1-datefield-input::placeholder { color: var(--fg-faint); }
.cpv1-datefield-input[aria-invalid="true"] { border-color: var(--color-slate-900); }
.cpv1-datefield-hint { display: block; font-size: 12px; color: var(--fg-muted); margin-top: 4px; }
.cpv1-datefield > turbo-frame > .cpv1-picker { position: absolute; top: 100%; left: 0; z-index: 100; margin-top: 6px; width: 300px; padding: 10px 14px; background: var(--surface, #fff); border: 1px solid var(--border, var(--color-slate-200)); border-radius: var(--r-card, 4px); box-shadow: var(--sh-menu, 0 8px 24px rgba(15, 23, 42, .12)); }
.cpv1-datefield--inline .cpv1-launch-picker-head { margin-top: 10px; }
.cpv1-datefield .cpv1-picker-close { margin-left: 6px; padding: 3px 10px; background: transparent; color: var(--fg-muted); border: 1px solid var(--border, var(--color-slate-200)); border-radius: var(--r-pill, 999px); font: inherit; font-size: 12px; cursor: pointer; }
.cpv1-datefield .cpv1-picker-close:hover { background: var(--color-slate-50); }