zoterosearch {
	flex-direction: column;
	// The pane sets a shared inline inset (its padding-inline); re-create it inside this scroll
	// container and cancel the pane's with a negative margin, so edge focus rings -- e.g. the
	// value field, or the caption's join-mode menulist -- aren't clipped by overflow: auto. The
	// block padding works the same way vertically. The negative margins keep the surrounding
	// spacing unchanged (the pane's padding and the column gap control it).
	padding-inline: 10px;
	margin-inline: -10px;
	padding-block: 8px;
	margin-block: -8px;
	gap: 8px;
	overflow: auto;
	max-height: 33vh;
	// Keep the whole builder a comfortable width on a wide window (left-aligned) rather
	// than stretching the rows across the full width. The value field flexes within this.
	max-width: 64em;
	@include macOS-normalize-controls;

	// Use the full pane width
	search-condition-group {
		display: flex;
		flex-direction: column;
	}

	.search-condition-group {
		gap: 8px;
		// Zero the toolkit groupbox margin/padding
		margin: 0;
		padding: 0;
		// The XUL groupbox shrink-wraps to content by default; fill its parent so the
		// conditions box (and the value field) can use the available width
		width: -moz-available;

		.conditions {
			min-width: fit-content; // Grow with content, don't overflow
			// Rows abut, separated by full-width dividers (below)
			gap: 0;
		}

		// A nested group has no box of its own. Each nesting level sets an indent that the
		// rows and headers below apply to their own content -- not to the container -- so
		// every row stays full width and its divider spans edge to edge. A group's
		// conditions hold the level's indent; its header inherits the parent's, so the
		// header lines up with the condition before it while the conditions step in one
		// more level. (Custom properties can't accumulate by self-reference, so each level
		// is set explicitly.)
		@for $depth from 1 through 6 {
			$sel: "";
			@for $i from 1 through $depth {
				$sel: "#{$sel}.search-condition-group ";
			}
			#{$sel}.conditions {
				--indent: #{$depth * 20}px;
			}
		}

		// The caption's remove-group/add-condition buttons, laid out so they line up in
		// the same columns as a condition row's remove/add buttons. The placeholder
		// reserves the trailing "( )" wrap-button column that rows have but captions don't.
		.group-actions {
			display: flex;
			align-items: center;
			gap: 8px;
		}

		.group-action-placeholder {
			width: 20px;
		}

		.remove-group {
			margin: 0;
		}
	}

	// Full-width dividers between rows and groups. They sit on the row/group wrappers,
	// which run the full width, so the lines span edge to edge regardless of how deeply
	// the content is indented. The first item in a box has no line above it; a group's
	// header is divided from its conditions by a line below the caption.
	.conditions > * {
		border-top: var(--material-border-quinary);
	}

	.conditions > *:first-child {
		border-top: 0;
	}

	search-condition-group:not([root]) > .search-condition-group {
		gap: 0;

		> caption {
			border-bottom: var(--material-border-quinary);
		}
	}

	// Only the root group draws the surrounding frame; nested groups are shown by
	// indentation
	search-condition-group[root] > .search-condition-group > .conditions {
		// No vertical padding: the rows' own 6px block padding sets the gap to the frame,
		// matching the gap to a divider, so the first and last rows are centered in their
		// bands just like the rows between dividers
		padding: 0 8px;
		background: var(--fill-senary);
		border: var(--material-border-quinary);
		border-radius: 6px;
	}

	// The root "Find ... matching ..." line is the top level of all conditions, so it needs no
	// indent; and with no divider above it, no vertical padding either
	search-condition-group[root] > .search-condition-group > caption {
		padding-inline-start: 0 !important;
		padding-block: 0;
	}

	// The per-condition "group" button (wraps the condition in a new group)
	.search-group-button {
		@include svgicon-menu("group-condition", "universal", "16");
		width: 20px;
		margin: 0;
		border: 0 !important;
		border-radius: 2px;
		color: var(--fill-secondary);

		.toolbarbutton-text {
			display: none;
		}
	}

	// The group caption's "ungroup" button sits in the same column as a row's group button and
	// reuses its styling, but with the bracket-remove icon
	.ungroup-group {
		@include svgicon-menu("ungroup-condition", "universal", "16");
	}
	
	.level-warning {
		// Each group's level warning: a light-red callout below its conditions (the root's at the
		// bottom, a nested group's inside its box), mirroring the binding hint's light-blue one.
		color: var(--color-invalid);
		font-size: 0.9em;
		// 10px inline is a small visual nudge to bring the text slightly in (it doesn't line up
		// with anything exactly); 8px block keeps the two-line message from cramping.
		padding: 8px 10px;
		background: var(--color-invalid-background);
		border-radius: 6px;
		// Fill the pane width but contribute no intrinsic (max-content) width of its own, so
		// showing/hiding this notice can't widen the search pane and shrink the collections
		// pane. (Its long text would otherwise push the pane to its max-width.)
		box-sizing: border-box;
		width: 0;
		min-width: 100%;

		description {
			// Wrap to the available width instead of overflowing the pane; min-width: 0 lets
			// it shrink within the flex row rather than contributing an intrinsic width
			flex: 1;
			min-width: 0;
			margin: 0;
			white-space: normal;
		}
	}

	// A nested group's warning sits inside the outer box, so leave room below it rather than
	// letting it butt against the box's bottom edge. (The root's warning is below the box.)
	search-condition-group:not([root]) .level-warning {
		margin-block-end: 6px;
	}

	#search-binding-hint {
		// A distinct suggestion callout under the conditions (not plain body text): a light
		// blue, rounded block with slightly smaller text, one "[statement] [button]" line per
		// bindable level. Fills the pane width but contributes no intrinsic width (like the
		// warning) so its line can't widen the search pane.
		display: flex;
		flex-direction: column;
		// Each row hugs its content (so the button sits right next to the text) while the
		// box itself still fills the pane width
		align-items: flex-start;
		gap: 8px;
		padding: 8px;
		font-size: 0.9em;
		background: var(--accent-blue10);
		border-radius: 6px;
		box-sizing: border-box;
		width: 0;
		min-width: 100%;

		> hbox {
			display: flex;
			align-items: center;
			gap: 5px;
		}

		button {
			margin: 0;
		}

		// The explicit `display: flex` above overrides the `hidden` attribute's display:none,
		// so re-assert it -- otherwise the empty box shows when there's nothing to suggest
		&[hidden] {
			display: none;
		}
	}

	#search-option-checkboxes {
		flex-direction: row;
		flex-wrap: wrap;
		gap: 8px;
		
		checkbox {
			margin: 0;
		}
	}

	caption {
		font: inherit;
		align-items: center;
		gap: 4px;
		margin: 0 !important;
		// Vertical breathing room around the divider lines
		padding-block: 6px;
		// A nested group's header inherits its parent's indent, so it lines up with the
		// sibling condition above it (the root header is re-indented to the box below).
		// The extra 5px matches the menulist's internal label inset, so "Match" aligns
		// with the condition dropdown's label rather than its (slightly wider) box.
		padding-inline-start: calc(var(--indent, 0px) + 5px) !important;

		label {
			margin: 0;
		}

		// Native menulists sit a couple pixels high relative to the inline label text
		// ("Find ... matching ... of the following:"); baseline/align-self alignment is
		// locked by the platform, so nudge them down to sit on the text
		menulist {
			margin-block-start: 2px;
		}
	}

	label:first-child:not(tooltip label), checkbox:first-child {
		margin-left: 0 !important;
		padding-left: 0 !important;
	}

	input {
		margin-block: 0;
	}

	// Native menulists carry platform-specific margins (e.g. 5px 2px 3px on
	// macOS) that macOS-normalize-controls doesn't cover, unlike the inputs and
	// checkboxes. Zero them and let the containers' gaps control the spacing.
	menulist {
		margin: 0;
	}

	.search-condition {
		flex: 1;
		display: flex;
		align-items: center;
		// Match the row's 6px block padding
		gap: 6px;
		// Vertical breathing room around the divider lines
		padding-block: 6px;
		// Indent the row's content by its nesting level (see --indent above) while the
		// row itself stays full width, so the divider below it spans edge to edge
		padding-inline-start: var(--indent, 0px);

		// The per-row tooltip container shouldn't take a flex slot (and the row's gap
		// after it), which would push the condition menu right of the "Match" header.
		// Take it out of flow rather than display:none, which would hide the tooltips.
		popupset {
			position: absolute;
		}

		.valuemenu, .value-date-age {
			flex: 1;
		}

		// The text value field grows to use the available row width (the overall cap is on
		// the builder, not here). It's a flex container itself so the inner stack/input
		// fills the host.
		.valuefield {
			display: flex;
			flex: 1;
			min-width: 12em;

			// The `display: flex` above overrides the `hidden` attribute's display:none, so
			// re-assert it -- otherwise the textbox shows alongside the value menu for
			// menu-based conditions (Collection, Item Type, Attachment File Type)
			&[hidden] {
				display: none;
			}
		}
	}

	.join-mode-menu {
		min-width: 60px;
	}
	
	#conditionsmenu {
		width: 15em;
	}
	
	#operatorsmenu, #valuemenu, .search-in-the-last {
		width: 12em;
	}

	// Fill the flexed value field (host -> stack -> input)
	#search-textbox {
		flex: 1;
		width: 100%;
		// Match the drop-down menus' height and drop the native search input's extra left margin,
		// so the row doesn't grow or shift (and the gap stays even) when switching between a text
		// field and a drop-down menu
		height: 22px;
		box-sizing: border-box;
		margin-inline: 0;
	}
	
	#valuemenu::part(icon) {
		max-height: 16px;
	}
	
	// Indent subcollections below their parents, icon included
	#valuemenu menuitem > .menu-icon {
		margin-inline-start: calc(var(--nesting-level, 0) * 16px);
	}

	#condition-tooltips hbox > label
	{
		font-weight: 600;
	}

	.toolbarbutton-text
	{
		margin: 0;
		padding: 0;
	}

	#textbox-button {
		cursor: default;
		appearance: none;
		justify-self: start;
		margin-inline-start: 12px;
		align-self: center;
		
		&:hover, &:active, &[open] {
			background: none;
		}
	}

	zoterosearchtextbox[hasOptions="true"] #search-textbox {
		padding-inline-start: 20px;
	}

	.search-in-the-last {
		flex: 1;
		display: flex;
		align-items: center;
		
		.input {
			min-width: 3em;
			flex: 1;
		}
	}
}
