[data-date-picker] {
	--_date-field-height: var(--date-field-height-md);
	--_date-field-px: var(--date-field-px-md);
	--_date-field-gap: var(--date-field-gap-md);
	--_date-field-segment-px: var(--date-field-segment-px-md);
	--_date-field-font-size: var(--date-field-font-size-md);
	--_date-field-accent-border: var(--color-primary-border);
	--_date-field-accent-track: var(--color-primary-track);
	--_date-field-accent-text: var(--color-primary-text);

	display: inline-flex;
	flex-direction: column;
	gap: var(--date-field-stack-gap);
	inline-size: 100%;
	min-inline-size: 0;
	color: var(--date-field-color);
	font-family: var(--date-field-font-family);
	font-size: var(--_date-field-font-size);
	line-height: var(--date-field-line-height);
}

[data-date-picker][data-size='xs'] {
	--_date-field-height: var(--date-field-height-xs);
	--_date-field-px: var(--date-field-px-xs);
	--_date-field-gap: var(--date-field-gap-xs);
	--_date-field-segment-px: var(--date-field-segment-px-xs);
	--_date-field-font-size: var(--date-field-font-size-xs);
}

[data-date-picker][data-size='sm'] {
	--_date-field-height: var(--date-field-height-sm);
	--_date-field-px: var(--date-field-px-sm);
	--_date-field-gap: var(--date-field-gap-sm);
	--_date-field-segment-px: var(--date-field-segment-px-sm);
	--_date-field-font-size: var(--date-field-font-size-sm);
}

[data-date-picker][data-size='lg'] {
	--_date-field-height: var(--date-field-height-lg);
	--_date-field-px: var(--date-field-px-lg);
	--_date-field-gap: var(--date-field-gap-lg);
	--_date-field-segment-px: var(--date-field-segment-px-lg);
	--_date-field-font-size: var(--date-field-font-size-lg);
}

[data-date-picker][data-color='secondary'] {
	--_date-field-accent-border: var(--color-secondary-border);
	--_date-field-accent-track: var(--color-secondary-track);
	--_date-field-accent-text: var(--color-secondary-text);
}

[data-date-picker][data-color='neutral'] {
	--_date-field-accent-border: var(--color-neutral-border);
	--_date-field-accent-track: var(--color-neutral-track);
	--_date-field-accent-text: var(--color-neutral-text);
}

[data-date-picker][data-color='affirm'] {
	--_date-field-accent-border: var(--color-affirm-border);
	--_date-field-accent-track: var(--color-affirm-track);
	--_date-field-accent-text: var(--color-affirm-text);
}

[data-date-picker][data-color='fulfill'] {
	--_date-field-accent-border: var(--color-fulfill-border);
	--_date-field-accent-track: var(--color-fulfill-track);
	--_date-field-accent-text: var(--color-fulfill-text);
}

[data-date-picker][data-color='risk'] {
	--_date-field-accent-border: var(--color-risk-border);
	--_date-field-accent-track: var(--color-risk-track);
	--_date-field-accent-text: var(--color-risk-text);
}

[data-date-picker][data-color='threat'] {
	--_date-field-accent-border: var(--color-threat-border);
	--_date-field-accent-track: var(--color-threat-track);
	--_date-field-accent-text: var(--color-threat-text);
}

[data-date-picker][data-color='loss'] {
	--_date-field-accent-border: var(--color-loss-border);
	--_date-field-accent-track: var(--color-loss-track);
	--_date-field-accent-text: var(--color-loss-text);
}

[data-date-picker][data-variant='outline'] [data-date-field-input] {
	background: transparent;
}

[data-date-picker][data-variant='ghost'] [data-date-field-input] {
	border-color: transparent;
	background: transparent;
	padding-inline: 0;
}

[data-date-picker][data-invalid] [data-date-field-input] {
	border-color: var(--date-field-border-invalid);
}

[data-date-picker][data-disabled] {
	opacity: var(--date-field-disabled-opacity);
}

/* Trigger chrome (flush affordance, hover / focus states, size) is shared —
   see field/field-control-trigger.css (`[data-field-control-trigger]`, the
   eidos marker on the trigger). */

[data-popover-content]:has([data-date-picker-calendar]) {
	--_popover-content-width-override: max-content;
	--_popover-content-min-width-override: max-content;
	--_popover-content-max-width-override: calc(100vw - var(--space-4));
}

[data-date-picker-calendar][data-calendar] {
	padding: 0;
	border-color: transparent;
	background: transparent;
	box-shadow: none;
}

[data-date-picker-calendar][data-calendar][data-invalid] {
	border-color: transparent;
}


/* ── Year-view + Month-view (kind='year' / 'month') ──────────────────────── */
/* DatePicker.MonthView and DatePicker.YearView now delegate to the
   standalone MonthGrid / YearGrid primitives, so their visuals come from
   `month-grid.css` and `year-grid.css`. */

/* The popover content uses a size-based base width (popover-min-width-{sm,md,…})
   that can be narrower than the picker-shell footer's intrinsic content
   (Clear / Cancel / Save buttons + gaps). Let the popover grow to max-content
   when it hosts a date-picker calendar / grid so the inner row never overflows
   and produces a horizontal scrollbar. */
[data-popover-content]:has(
		> [data-date-picker-calendar],
		> [data-month-grid],
		> [data-year-grid]
	) {
	inline-size: max-content;
	min-inline-size: max-content;
}