@layer theme {
	/* page-search palette. fs-search.js parents it to <body>: .fs-sidebar is overflow:auto, which
	 * would clip a child of the trigger, and the overlay covers the whole viewport anyway. */

	/* --fs-scrim is the theme's one colour literal (plain black at .7) on purpose: absence of light behind a dialog, not a tint of any palette token */
	.fs-search-ov {
		position: fixed; inset: 0; z-index: var(--fs-z-popover);
		/* what the `hidden` attribute has to beat — base/10-reset.css covers every element now */
		display: flex; justify-content: center;
		/* not centred vertically: the box grows DOWNWARD as results come in, centred would slide the input out from under the user's eyes on every keystroke */
		align-items: flex-start;
		padding: max(8vh, var(--fs-space-6)) var(--fs-space-4) var(--fs-space-4);
		background: var(--fs-scrim);
		animation: fs-fade var(--fs-dur-fade);
	}

	/* a SCROLL CONTAINER, not decoration: uncapped the box grows past a short viewport (phone
	 * landscape ~380px), and a position:fixed popup cannot be scrolled by the page */
	.fs-search-box {
		display: flex; flex-direction: column; min-height: 0;
		width: 100%; max-width: 560px; max-height: min(70dvh, 560px);
		background: var(--fs-panel);
		border: var(--fs-hairline); border-radius: var(--fs-radius-lg);
		box-shadow: var(--fs-shadow-pop);
		overflow: hidden;
	}

	.fs-search-row {
		display: flex; align-items: center; gap: var(--fs-space-2-5); flex: 0 0 auto;
		padding: var(--fs-space-3) var(--fs-space-3-5);
		border-bottom: var(--fs-hairline);
	}
	.fs-search-ico { display: inline-flex; color: var(--fs-faint); }
	.fs-search-ico .fs-ico { width: 18px; height: 18px; }
	/* the ROW is the field, the input carries no frame of its own — two classes (0,2,0) needed to
	 * outrank 60-inputs.css's generic field box (0,1,1) in the same layer regardless of source
	 * order. 16px, not the theme's body size: below 16px iOS Safari zooms the page on focus, and
	 * this field focuses as the palette opens. */
	.fs-search-row .fs-search-input {
		flex: 1 1 auto; min-width: 0;
		margin: 0; padding: 0; border: 0; min-height: 0; background: transparent;
		color: var(--fs-text);
		font-family: inherit; font-size: var(--fs-type-lg); font-weight: var(--fs-weight); line-height: 1.4;
	}
	.fs-search-row .fs-search-input:focus { outline: none; box-shadow: none; }
	/* one placeholder ink for the whole theme (03-palettes.css); not measured by placeholder-ink (no gallery fixture), must not drift from the fields that are */
	.fs-search-row .fs-search-input::placeholder { color: var(--fs-placeholder); font-weight: var(--fs-weight); }

	.fs-search-list { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: var(--fs-space-1-5); }

	.fs-search-opt {
		display: flex; align-items: baseline; gap: var(--fs-space-2-5);
		padding: var(--fs-space-2) var(--fs-space-2-5); border-radius: var(--fs-radius);
		color: var(--fs-text); text-decoration: none; cursor: pointer;
	}
	/* one highlight for pointer AND keyboard: .active is set on both aria-activedescendant and pointermove, so mouse and arrow keys can never disagree which row Enter opens */
	.fs-search-opt.active { background: var(--fs-accent-soft); color: var(--fs-accent); }
	.fs-search-opt-title { flex: 0 1 auto; font-weight: var(--fs-weight-bold); font-size: var(--fs-type); }
	.fs-search-opt-path {
		flex: 1 1 auto; min-width: 0;
		color: var(--fs-faint); font-size: var(--fs-type); text-align: end;
		overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
	}
	.fs-search-opt.active .fs-search-opt-path { color: inherit; }

	.fs-search-note {
		flex: 0 0 auto;
		padding: var(--fs-space-2-5) var(--fs-space-3-5) var(--fs-space-0-5);
		color: var(--fs-eyebrow-color);
		font-size: var(--fs-type-xs); font-weight: var(--fs-eyebrow-weight); letter-spacing: var(--fs-eyebrow-tracking); text-transform: uppercase;
	}

	/* empty state ("No pages found") reads as a sentence, not an eyebrow label. :has(), not a
	 * sibling combinator: the note sits ABOVE the list it describes, `+` cannot reach back to it. */
	.fs-search-box:has(.fs-search-list:empty) .fs-search-note {
		padding: var(--fs-space-6) var(--fs-space-3-5) var(--fs-space-7);
		text-align: center; text-transform: none; letter-spacing: 0;
		font-size: var(--fs-type); font-weight: var(--fs-weight);
	}
}