/** Context-free geometry and states. Hosts supply only --lean-combobox-* paint. */
:where(.lean-combobox) {
	--lean-combobox-space-2xs: 2px;
	--lean-combobox-space-xs: 4px;
	--lean-combobox-space-s: 8px;
	--lean-combobox-radius: 8px;
	--lean-combobox-radius-s: 4px;
	--lean-combobox-border-width: 1px;
	--lean-combobox-surface: Canvas;
	--lean-combobox-surface-alt: ButtonFace;
	--lean-combobox-text: CanvasText;
	--lean-combobox-text-alt: ButtonText;
	--lean-combobox-text-muted: GrayText;
	--lean-combobox-border: ButtonBorder;
	--lean-combobox-selected: Highlight;
	--lean-combobox-on-selected: HighlightText;
	--lean-combobox-focus: Highlight;
	--lean-combobox-selected-soft: color-mix(in srgb, var(--lean-combobox-selected) 10%, var(--lean-combobox-surface));
	--lean-combobox-on-selected-soft: var(--lean-combobox-text);
	--lean-combobox-hover: color-mix(in srgb, var(--lean-combobox-text) 4%, var(--lean-combobox-surface));
	--lean-combobox-on-hover: var(--lean-combobox-text);
	--lean-combobox-font-size: 0.875rem;
	--lean-combobox-font-size-small: 0.8125rem;
	--lean-combobox-touch-target: 36px;
	--lean-combobox-chip-height: 30px;
	--lean-combobox-chip-radius: 999px;
	--lean-combobox-z-index: 1000;
	--lean-combobox-shadow: 0 4px 16px rgb(0 0 0 / 12%);
	--lean-combobox-motion-fast: 120ms;
	--lean-combobox-ease-out: cubic-bezier(0.22, 1, 0.36, 1);
	--lean-combobox-disabled-opacity: 0.55;
}

.lean-combobox {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: var(--lean-combobox-space-xs);
	min-inline-size: 0;
}

.lean-combobox__input {
	position: relative;
	display: flex;
	min-inline-size: 0;
}
.lean-combobox__input > [data-lean-combobox-search] {
	box-sizing: border-box;
	inline-size: 100%;
	min-inline-size: 0;
	padding-inline-end: 44px;
	appearance: none;
}
.lean-combobox__input > [data-lean-combobox-search]::-webkit-search-cancel-button,
.lean-combobox__input > [data-lean-combobox-search]::-webkit-search-decoration {
	appearance: none;
	display: none;
}
.lean-combobox__indicator {
	position: absolute;
	inset-block: 0;
	inset-inline-end: 0;
	display: grid;
	place-items: center;
	inline-size: 44px;
	color: var(--lean-combobox-text-muted);
	pointer-events: none;
}
.lean-combobox__indicator svg {
	inline-size: 1rem;
	block-size: 1rem;
	fill: none;
	stroke: currentColor;
	stroke-width: 2;
	stroke-linecap: round;
	stroke-linejoin: round;
	transition: transform var(--lean-combobox-motion-fast) var(--lean-combobox-ease-out);
}
.lean-combobox__input:has([aria-expanded="true"]) .lean-combobox__indicator svg { transform: rotate(180deg); }

.lean-combobox__selected {
	display: flex;
	flex-wrap: wrap;
	gap: var(--lean-combobox-space-xs);
	min-inline-size: 0;
}

.lean-combobox__chip {
	display: inline-flex;
	align-items: center;
	gap: var(--lean-combobox-space-2xs);
	box-sizing: border-box;
	max-inline-size: 100%;
	min-block-size: var(--lean-combobox-chip-height);
	padding: 0 var(--lean-combobox-space-2xs) 0 var(--lean-combobox-space-s);
	border: var(--lean-combobox-border-width) solid transparent;
	border-radius: var(--lean-combobox-chip-radius);
	background: var(--lean-combobox-surface-alt);
	color: var(--lean-combobox-text-alt);
	font-size: var(--lean-combobox-font-size-small);
	line-height: 1.3;
}

.lean-combobox__chip > span {
	min-inline-size: 0;
	padding-block: var(--lean-combobox-space-2xs);
	overflow-wrap: anywhere;
}

.lean-combobox__chip > button {
	display: inline-grid;
	place-items: center;
	flex: 0 0 auto;
	box-sizing: border-box;
	min-inline-size: 26px;
	min-block-size: 26px;
	padding: 0;
	border: 0;
	border-radius: var(--lean-combobox-chip-radius);
	background: transparent;
	color: inherit;
	font: inherit;
	line-height: 1;
	cursor: pointer;
}

.lean-combobox__toggle-all {
	display: flex !important;
	align-items: center;
	gap: var(--lean-combobox-space-s) !important;
	width: 100%;
	font-weight: 600;
}

.lean-combobox__option--toggle-all {
	border-bottom: var(--lean-combobox-border-width) solid var(--lean-combobox-border);
}

.lean-combobox__menu {
	position: absolute;
	inset: 100% 0 auto;
	z-index: var(--lean-combobox-z-index);
	display: flex;
	flex-direction: column;
	box-sizing: border-box;
	height: auto;
	max-height: min(16rem, var(--_combobox-available-height, 16rem));
	overflow-y: auto;
	overscroll-behavior: contain;
	padding: var(--lean-combobox-space-s);
	border: var(--lean-combobox-border-width) solid var(--lean-combobox-border);
	border-radius: var(--lean-combobox-radius);
	background: var(--lean-combobox-surface);
	color: var(--lean-combobox-text);
	box-shadow: var(--lean-combobox-shadow);
}

.lean-combobox__menu::after {
	content: attr(data-loading-label);
	position: absolute;
	inset: auto var(--lean-combobox-space-xs) var(--lean-combobox-space-xs);
	display: block;
	padding-inline: var(--lean-combobox-space-s);
	border-radius: var(--lean-combobox-radius-s);
	background: var(--lean-combobox-surface);
	color: var(--lean-combobox-text-muted);
	font-size: var(--lean-combobox-font-size-small);
	line-height: var(--lean-combobox-touch-target);
	text-align: center;
	opacity: 0;
	pointer-events: none;
	transform: translateY(var(--lean-combobox-space-xs));
	transition: opacity var(--lean-combobox-motion-fast) var(--lean-combobox-ease-out), transform var(--lean-combobox-motion-fast) var(--lean-combobox-ease-out);
}

.lean-combobox__menu[data-pending] :is(.lean-combobox__option, .lean-combobox__back) { pointer-events: none; }
.lean-combobox__menu.is-loading:has([role="option"])::after { opacity: 1; transform: translateY(0); }
.lean-combobox__menu.is-loading :is(.lean-combobox__option, .lean-combobox__back) {
	opacity: var(--lean-combobox-disabled-opacity);
	transition: opacity var(--lean-combobox-motion-fast) var(--lean-combobox-ease-out);
}

/* Top-layer placement preserves clipping on the authored host. */
.lean-combobox__menu:popover-open {
	position: fixed;
	inset: auto;
	margin: 0;
	min-width: min(12rem, calc(100vw - 16px));
	max-width: calc(100vw - 16px);
}
.lean-combobox__menu[hidden] { display: none; }

.lean-combobox__menu button {
	box-sizing: border-box;
	min-block-size: var(--lean-combobox-touch-target);
	min-inline-size: var(--lean-combobox-touch-target);
	padding: var(--lean-combobox-space-xs) var(--lean-combobox-space-s);
	border: 0;
	border-radius: var(--lean-combobox-radius-s);
	background: transparent;
	color: inherit;
	font: inherit;
	font-size: var(--lean-combobox-font-size);
	line-height: 1.4;
	text-align: start;
	cursor: pointer;
}
.lean-combobox__menu button:disabled { cursor: not-allowed; opacity: var(--lean-combobox-disabled-opacity); }

.lean-combobox__option {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	align-items: center;
	flex: 0 0 auto;
	border-radius: var(--lean-combobox-radius-s);
}
.lean-combobox__option > [data-lean-combobox-pick] {
	display: flex !important;
	align-items: center;
	gap: var(--lean-combobox-space-s) !important;
	min-width: 0;
}
.lean-combobox__checkbox {
	position: relative;
	box-sizing: border-box;
	flex: 0 0 1rem;
	inline-size: 1rem;
	block-size: 1rem;
	border: var(--lean-combobox-border-width) solid var(--lean-combobox-text-muted);
	border-radius: var(--lean-combobox-radius-s);
	background: var(--lean-combobox-surface);
}
.lean-combobox__option[aria-selected="true"] .lean-combobox__checkbox {
	border-color: var(--lean-combobox-selected);
	background: var(--lean-combobox-selected);
}
.lean-combobox__option[aria-selected="true"] .lean-combobox__checkbox::after {
	content: "";
	position: absolute;
	inset: 0.15rem 0.28rem 0.28rem;
	border: solid var(--lean-combobox-on-selected);
	border-width: 0 0.125rem 0.125rem 0;
	transform: rotate(45deg);
}
.lean-combobox__option-media {
	display: inline-flex !important;
	flex: 0 0 1.5rem !important;
	align-items: center;
	justify-content: center;
	inline-size: 1.5rem !important;
	block-size: 1.5rem !important;
	overflow: hidden;
	border-radius: var(--lean-combobox-radius-s);
	font-size: 1.125rem;
	line-height: 1;
}
.lean-combobox__option-media img {
	display: block !important;
	inline-size: 100% !important;
	block-size: 100% !important;
	max-inline-size: 100% !important;
	object-fit: contain !important;
}
.lean-combobox__option-label { min-inline-size: 0; white-space: normal; overflow-wrap: anywhere; }
/* Selection is persistent paint plus a marker. Keyboard position is an outline,
   never a second selected-looking row. Neither changes layout. */
.lean-combobox__option[aria-selected="true"] {
	background: var(--lean-combobox-selected-soft);
	color: var(--lean-combobox-on-selected-soft);
}
.lean-combobox__option.is-active {
	outline: 2px solid var(--lean-combobox-focus);
	outline-offset: -2px;
}
.lean-combobox__check {
	flex: 0 0 1rem;
	inline-size: 1rem;
	block-size: 1rem;
	margin-inline-start: auto;
	visibility: hidden;
	fill: none;
	stroke: currentColor;
	stroke-width: 2;
	stroke-linecap: round;
	stroke-linejoin: round;
}
.lean-combobox__option[aria-selected="true"] .lean-combobox__check { visibility: visible; }
.lean-combobox[data-multiple="true"] .lean-combobox__check { display: none; }
.lean-combobox__menu button:focus-visible, .lean-combobox__chip > button:focus-visible {
	outline: 2px solid var(--lean-combobox-focus);
	outline-offset: -2px;
}

@media (hover: hover) and (pointer: fine) {
	.lean-combobox__menu:not([data-pending]) .lean-combobox__option:not([aria-selected="true"]):has(button:enabled):hover,
	.lean-combobox__back:enabled:hover {
		background: var(--lean-combobox-hover);
		color: var(--lean-combobox-on-hover);
	}
	.lean-combobox__chip > button:enabled:hover {
		background: var(--lean-combobox-selected);
		color: var(--lean-combobox-on-selected);
	}
}
.lean-combobox__status {
	padding: var(--lean-combobox-space-s);
	color: var(--lean-combobox-text-muted);
	font-size: var(--lean-combobox-font-size-small);
	line-height: 1.4;
}

@media (pointer: coarse) {
	.lean-combobox__menu button { min-block-size: 44px; min-inline-size: 44px; }
	.lean-combobox__chip > button { min-block-size: 44px; min-inline-size: 44px; }
}

@media (prefers-reduced-motion: reduce) {
	.lean-combobox__indicator svg { transition: none; }
	.lean-combobox__menu::after,
	.lean-combobox__menu.is-loading :is(.lean-combobox__option, .lean-combobox__back) { transition: none; transform: none; }
}