/* Guest keyword search: the "Find a feature" control and its suggestions, the
   count suffix, the card badge and quote line, the no-results block and the
   busy notices.

   Colors. The accent is --hrtk-kw-accent (printed by PHP on .hfse when one
   resolves), then the skin primary, then the text color. Everything else is
   mixed from the surrounding text color, so the pieces follow the site on
   light and dark sections alike. Two pieces sit on top of other content and
   need an opaque surface, which no mix of the text color can give: the
   suggestions panel (over the grid) and the badge (over a photo). They use
   the system Canvas / CanvasText pair, overridable through
   --hrtk-kw-surface and --hrtk-kw-ink.

   Specificity. Buttons and the input are reset with `all: unset` under two
   or three classes, which outranks theme-wide `button`, `input` and
   `input[type="search"]` rules without !important. Nothing inside a card
   uses !important: the site's own card rules win there. */

.hrtk-kw-find,
.hrtk-kw-notice,
.hrtk-kw-zero,
.hrtk-kw-badge,
.hrtk-kw-quote {
	--hrtk-kw-a: var(--hrtk-kw-accent, var(--hrtk-skin-color-primary, currentColor));
}

@keyframes hrtk-kw-grow {
	from {
		clip-path: inset(0 0 0 62% round 999px);
		opacity: 0.5;
	}
	to {
		clip-path: inset(0 0 0 0 round 999px);
		opacity: 1;
	}
}

@keyframes hrtk-kw-fade {
	from {
		opacity: 0;
	}
	to {
		opacity: 1;
	}
}

@keyframes hrtk-kw-spin {
	to {
		transform: rotate(360deg);
	}
}

/* ---- Icons: masks filled with the text color ---- */

.hrtk-kw-icon {
	flex: none;
	display: inline-block;
	width: 15px;
	height: 15px;
	background-color: currentColor;
	-webkit-mask-position: center;
	mask-position: center;
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-size: contain;
	mask-size: contain;
}

.hrtk-kw-icon-search {
	-webkit-mask-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-3.6-3.6'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-3.6-3.6'/%3E%3C/svg%3E");
}

.hrtk-kw-icon-x {
	width: 13px;
	height: 13px;
	-webkit-mask-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M6 6l12 12M18 6 6 18'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M6 6l12 12M18 6 6 18'/%3E%3C/svg%3E");
}

.hrtk-kw-icon-check {
	width: 11px;
	height: 11px;
	-webkit-mask-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12.5 4.5 4.5L19 7.5'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12.5 4.5 4.5L19 7.5'/%3E%3C/svg%3E");
}

/* ---- The control ---- */

/* In Searchbar Pro's results header it takes the free space between the
   count and Sort and keeps its content at the Sort end: the pill sits
   beside Sort and the field grows toward the count. The header may wrap
   when the grid column is too narrow for all three. */
.hrtk-sbp-results-header.hrtk-kw-host {
	flex-wrap: wrap;
	row-gap: 10px;
}

.hrtk-kw-find {
	position: relative;
	box-sizing: border-box;
	display: flex;
	flex: 1 1 150px;
	align-items: center;
	justify-content: flex-end;
	min-width: 0;
	margin: 0;
	font-size: 13px;
	line-height: 1.3;
	text-align: start;
}

/* A row of its own: under the core filter pane, or at the top of the grid
   wrapper. Left-aligned there. It is always as tall as the open field,
   with the pill centered in it, so opening the pill never moves the cards
   (Searchbar Pro's header is already taller than the field). */
.hrtk-kw-row {
	display: flex;
	align-items: center;
	min-height: 36px;
	margin: 12px 0 14px;
}

.hfse-properties-container > .hrtk-kw-row {
	margin-top: 0;
}

.hrtk-kw-row .hrtk-kw-find {
	justify-content: flex-start;
}

/* Collapsed: a pill with the Sort pill's metrics (padding, line height,
   border weight, radius, font size). */
.hrtk-kw-find .hrtk-kw-pill {
	all: unset;
	box-sizing: border-box;
	display: inline-flex;
	align-items: center;
	gap: 7px;
	padding: 5px 14px 5px 11px;
	border: 1px solid;
	border-color: color-mix(in srgb, currentColor 18%, transparent);
	border-radius: var(--hrtk-sbp-shape-max, 999px);
	outline: 2px solid transparent;
	outline-offset: 2px;
	max-width: 100%;
	font-size: 13px;
	line-height: 1.3;
	white-space: nowrap;
	cursor: pointer;
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.hrtk-kw-pill-label {
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
}

.hrtk-kw-find .hrtk-kw-pill:hover {
	border-color: color-mix(in srgb, currentColor 35%, transparent);
	background: none;
	color: inherit;
}

.hrtk-kw-find .hrtk-kw-pill:focus-visible {
	border-color: var(--hrtk-kw-a);
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--hrtk-kw-a) 25%, transparent);
}

.hrtk-kw-find .hrtk-kw-pill .hrtk-kw-icon,
.hrtk-kw-find .hrtk-kw-field > .hrtk-kw-icon {
	opacity: 0.62;
}

.hrtk-kw-find.has-term .hrtk-kw-field > .hrtk-kw-icon {
	opacity: 1;
}

/* Open: the field replaces the pill in place. */
.hrtk-kw-find .hrtk-kw-field {
	box-sizing: border-box;
	display: flex;
	align-items: center;
	gap: 8px;
	width: 100%;
	max-width: 340px;
	height: 36px;
	margin: 0;
	padding: 0 5px 0 12px;
	border: 1px solid;
	border-color: color-mix(in srgb, currentColor 26%, transparent);
	border-radius: var(--hrtk-sbp-shape-max, 999px);
	outline: 2px solid transparent;
	outline-offset: 2px;
	cursor: text;
	transition: border-color 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease;
	animation: hrtk-kw-grow 0.22s ease-out;
}

/* Left-aligned in a row of its own, so it fades in instead of growing from
   the right; and no entrance at all when the field is always visible. */
.hrtk-kw-row .hrtk-kw-find .hrtk-kw-field {
	animation-name: hrtk-kw-fade;
}

.hrtk-kw-find:not(.is-collapsible) .hrtk-kw-field {
	animation: none;
}

.hrtk-kw-find.is-focus .hrtk-kw-field,
.hrtk-kw-find .hrtk-kw-field:focus-within {
	border-color: var(--hrtk-kw-a);
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--hrtk-kw-a) 25%, transparent);
}

/* Applied: a faint accent tint and the term in a heavier weight. */
.hrtk-kw-find.has-term .hrtk-kw-field {
	border-color: color-mix(in srgb, var(--hrtk-kw-a) 60%, transparent);
	background-color: color-mix(in srgb, var(--hrtk-kw-a) 7%, transparent);
}

.hrtk-kw-find .hrtk-kw-field input.hrtk-kw-input {
	all: unset;
	box-sizing: border-box;
	flex: 1 1 0;
	min-width: 0;
	height: 100%;
	-webkit-appearance: none;
	appearance: none;
	font-size: 14px;
	line-height: 1.2;
	text-align: start;
	text-overflow: ellipsis;
	cursor: text;
}

.hrtk-kw-find.has-term .hrtk-kw-field input.hrtk-kw-input {
	font-weight: 600;
}

.hrtk-kw-find .hrtk-kw-field input.hrtk-kw-input::placeholder {
	color: color-mix(in srgb, currentColor 62%, transparent);
	opacity: 1;
}

.hrtk-kw-find .hrtk-kw-field input.hrtk-kw-input::-webkit-search-cancel-button,
.hrtk-kw-find .hrtk-kw-field input.hrtk-kw-input::-webkit-search-decoration {
	-webkit-appearance: none;
	display: none;
}

.hrtk-kw-find .hrtk-kw-key {
	all: unset;
	flex: none;
	padding: 4px 6px;
	border: 1px solid;
	border-color: color-mix(in srgb, currentColor 22%, transparent);
	border-radius: 5px;
	color: color-mix(in srgb, currentColor 62%, transparent);
	font-size: 11px;
	line-height: 1;
}

.hrtk-kw-find .hrtk-kw-clear {
	all: unset;
	box-sizing: border-box;
	flex: none;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 26px;
	height: 26px;
	border-radius: 50%;
	cursor: pointer;
}

.hrtk-kw-find .hrtk-kw-clear:hover {
	background: color-mix(in srgb, currentColor 10%, transparent);
	color: inherit;
}

.hrtk-kw-find .hrtk-kw-clear:focus-visible {
	outline: 2px solid var(--hrtk-kw-a);
	outline-offset: 1px;
}

/* ---- Suggested terms: a panel under the field that overlays the grid ---- */

.hrtk-kw-find .hrtk-kw-suggest {
	position: absolute;
	top: calc(100% + 8px);
	right: 0;
	z-index: 30;
	box-sizing: border-box;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 10px;
	width: min(380px, 92vw);
	margin: 0;
	padding: 14px 16px 16px;
	border: 1px solid color-mix(in srgb, CanvasText 14%, transparent);
	border-radius: 16px;
	background: var(--hrtk-kw-surface, Canvas);
	color: var(--hrtk-kw-ink, CanvasText);
	box-shadow: 0 14px 36px color-mix(in srgb, CanvasText 16%, transparent);
}

.hrtk-kw-row .hrtk-kw-find .hrtk-kw-suggest {
	right: auto;
	left: 0;
}

.hrtk-kw-suggest-label {
	color: color-mix(in srgb, currentColor 62%, transparent);
	font-size: 12px;
	letter-spacing: 0.04em;
	white-space: nowrap;
}

.hrtk-kw-chips {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

/* A term chip: in the suggestions and in the no-results block. */
.hrtk-kw-find .hrtk-kw-term,
.hrtk-kw-zero .hrtk-kw-term {
	all: unset;
	box-sizing: border-box;
	flex: none;
	display: inline-flex;
	align-items: center;
	gap: 7px;
	padding: 7px 12px;
	border: 1px solid;
	border-color: color-mix(in srgb, currentColor 18%, transparent);
	border-radius: 999px;
	font-size: 13px;
	line-height: 1.2;
	white-space: nowrap;
	cursor: pointer;
	transition: border-color 0.15s ease, background-color 0.15s ease;
}

.hrtk-kw-find .hrtk-kw-term:hover,
.hrtk-kw-zero .hrtk-kw-term:hover {
	border-color: var(--hrtk-kw-a);
	background: color-mix(in srgb, var(--hrtk-kw-a) 14%, transparent);
	color: inherit;
}

.hrtk-kw-find .hrtk-kw-term:focus-visible,
.hrtk-kw-zero .hrtk-kw-term:focus-visible {
	outline: 2px solid var(--hrtk-kw-a);
	outline-offset: 2px;
}

.hrtk-kw-term-n {
	color: color-mix(in srgb, currentColor 62%, transparent);
	font-size: 11px;
	font-variant-numeric: tabular-nums;
}

/* What is switched off stays off, whatever display the rules above set. */
.hrtk-kw-find.is-collapsed .hrtk-kw-field,
.hrtk-kw-find:not(.is-collapsed) .hrtk-kw-pill,
.hrtk-kw-find .hrtk-kw-key[hidden],
.hrtk-kw-find .hrtk-kw-clear[hidden],
.hrtk-kw-find .hrtk-kw-suggest[hidden] {
	display: none;
}

/* ---- Count: " of M" beside the explorer's own count ---- */

/* `pre` keeps the leading space where the count sits in a flex row (the
   core pane), which would otherwise drop it. */
.hrtk-kw-count-of {
	color: color-mix(in srgb, currentColor 62%, transparent);
	font-weight: 400;
	white-space: pre;
}

/* ---- Card: badge on the photo, quote line under the subtitle ---- */

.hfse-property-media.hrtk-kw-has-badge {
	position: relative;
}

.hrtk-kw-badge {
	position: absolute;
	bottom: 12px;
	left: 10px;
	z-index: 3;
	box-sizing: border-box;
	display: inline-flex;
	align-items: center;
	gap: 6px;
	max-width: calc(100% - 20px);
	padding: 5px 11px 5px 6px;
	border-radius: 999px;
	background: var(--hrtk-kw-surface, Canvas);
	color: var(--hrtk-kw-ink, CanvasText);
	box-shadow: 0 2px 10px color-mix(in srgb, CanvasText 22%, transparent);
	font-size: 12.5px;
	font-weight: 600;
	line-height: 1.2;
	white-space: nowrap;
	pointer-events: none;
}

/* Above the slideshow dots when the card has them. */
.hfse-property-media:has(.hfse-property-slideshow-dotnav) > .hrtk-kw-badge {
	bottom: 36px;
}

/* A home without photos has no media to sit on: the badge then leads the
   card's text, in the flow. No surface of its own, so the card's colors
   show through. */
.hrtk-kw-badge.hrtk-kw-badge-inline {
	position: static;
	display: flex;
	align-self: flex-start;
	width: fit-content;
	max-width: 100%;
	margin: 0 0 8px;
	border: 1px solid;
	border-color: color-mix(in srgb, currentColor 18%, transparent);
	background: none;
	color: inherit;
	box-shadow: none;
}

/* The disc is the accent, and with no accent the badge's own ink: the
   variable then reads currentColor, which resolves here. So the tick sets
   no color of its own (the disc would take it and match the glyph): the
   contrasting color goes on the glyph alone. */
.hrtk-kw-badge-tick {
	flex: none;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 18px;
	height: 18px;
	border-radius: 50%;
	background: var(--hrtk-kw-a);
}

.hrtk-kw-badge-tick .hrtk-kw-icon {
	color: var(--hrtk-kw-surface, Canvas);
}

/* In the flow the badge has no surface, and what contrasts with a disc in
   the card's ink is the card's background, which nothing here can know.
   No disc there: the glyph alone, in the accent or in the card's ink. */
.hrtk-kw-badge-inline .hrtk-kw-badge-tick {
	background: none;
}

.hrtk-kw-badge-inline .hrtk-kw-badge-tick .hrtk-kw-icon {
	color: var(--hrtk-kw-a);
}

.hrtk-kw-badge-text {
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
}

.hrtk-kw-quote {
	display: -webkit-box;
	margin: 8px 0 0;
	overflow: hidden;
	color: color-mix(in srgb, currentColor 62%, transparent);
	font-size: 13px;
	line-height: 1.4;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	line-clamp: 2;
}

/* A marker stroke under the words, so it reads on any card color. */
.hrtk-kw-quote mark {
	padding: 0 1px;
	border-radius: 0;
	background: linear-gradient(transparent 58%, color-mix(in srgb, var(--hrtk-kw-a) 34%, transparent) 58%);
	color: inherit;
	font-weight: 600;
}

/* ---- No results, with recovery ---- */

.hrtk-kw-zero {
	box-sizing: border-box;
	margin: 0 0 16px;
	padding: 34px 28px 30px;
	border: 1px dashed;
	border-color: color-mix(in srgb, currentColor 24%, transparent);
	border-radius: 16px;
	text-align: center;
}

.hrtk-kw-zero .hrtk-kw-zero-title {
	margin: 0;
	font-size: 20px;
	line-height: 1.25;
}

.hrtk-kw-zero-term {
	background: linear-gradient(transparent 58%, color-mix(in srgb, var(--hrtk-kw-a) 34%, transparent) 58%);
}

.hrtk-kw-zero .hrtk-kw-zero-lede {
	margin: 6px 0 0;
	color: color-mix(in srgb, currentColor 62%, transparent);
	font-size: 14px;
}

.hrtk-kw-zero-terms {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 8px;
	margin: 16px 0 0;
}

.hrtk-kw-zero .hrtk-kw-zero-clear {
	all: unset;
	display: inline-block;
	margin: 18px 0 0;
	color: color-mix(in srgb, currentColor 62%, transparent);
	font-size: 13px;
	text-decoration: underline;
	text-underline-offset: 3px;
	cursor: pointer;
}

.hrtk-kw-zero .hrtk-kw-zero-clear:hover {
	background: none;
	color: inherit;
}

.hrtk-kw-zero .hrtk-kw-zero-clear:focus-visible {
	outline: 2px solid var(--hrtk-kw-a);
	outline-offset: 3px;
}

/* The explorer's bare "no properties" text would only repeat the block. */
.hfse-properties-no-items.hrtk-kw-dup {
	display: none;
}

/* ---- Busy notices ---- */

.hrtk-kw-notice {
	box-sizing: border-box;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 14px;
	margin: 0 0 14px;
	padding: 18px 20px;
	border: 1px solid;
	border-color: color-mix(in srgb, currentColor 14%, transparent);
	border-radius: 14px;
	background: color-mix(in srgb, currentColor 4%, transparent);
	font-size: 14px;
	line-height: 1.35;
	text-align: start;
}

.hrtk-kw-notice-copy {
	display: flex;
	flex-direction: column;
	gap: 2px;
	min-width: 0;
}

.hrtk-kw-notice-title {
	font-weight: 600;
}

.hrtk-kw-notice-text {
	color: color-mix(in srgb, currentColor 62%, transparent);
	font-size: 13px;
}

.hrtk-kw-notice-failed {
	flex-wrap: wrap;
	justify-content: space-between;
	padding: 20px 22px;
}

/* Load more: under the grid, above the button. */
.hrtk-kw-notice-inline {
	max-width: 420px;
	margin: 14px auto;
}

.hrtk-kw-retry {
	flex: none;
	white-space: nowrap;
	cursor: pointer;
}

.hrtk-kw-spinner {
	box-sizing: border-box;
	flex: none;
	width: 18px;
	height: 18px;
	border: 2px solid color-mix(in srgb, var(--hrtk-kw-a) 34%, transparent);
	border-top-color: var(--hrtk-kw-a);
	border-radius: 50%;
	animation: hrtk-kw-spin 0.9s linear infinite;
}

.hfse-properties-more-btn[data-hrtk-kw-held] {
	cursor: progress;
}

.hfse-properties-more-container.hrtk-kw-more-hidden {
	display: none;
}

/* ---- Phone: 640px and below, and always inside the mobile sheet ----
   The control takes a line of its own with the pill centered, the field is
   full width and tall enough to tap (16px text, so iOS does not zoom), and
   the suggestions are one row that scrolls sideways. The same rules twice:
   the sheet can be up at widths above 640px. */

@media (max-width: 640px) {
	.hrtk-kw-find,
	.hrtk-kw-row .hrtk-kw-find {
		flex: 1 0 100%;
		flex-wrap: wrap;
		order: 10;
		justify-content: center;
		/* The open field's height here, for the same reason as the row's. */
		min-height: 44px;
	}

	.hrtk-kw-row {
		min-height: 44px;
		margin: 0 0 12px;
	}

	.hrtk-kw-find .hrtk-kw-pill {
		padding: 9px 16px 9px 13px;
		font-size: 14.5px;
	}

	.hrtk-kw-find .hrtk-kw-field {
		max-width: none;
		height: 44px;
		padding-left: 14px;
		animation-name: hrtk-kw-fade;
	}

	.hrtk-kw-find .hrtk-kw-field input.hrtk-kw-input {
		font-size: 16px;
	}

	.hrtk-kw-find .hrtk-kw-key {
		display: none;
	}

	/* Not in the chips row: there the field is a chip's height and the
	   panel keeps its desktop shape under it. */
	.hrtk-kw-find:not(.hrtk-kw-find--chips) .hrtk-kw-suggest,
	.hrtk-kw-row .hrtk-kw-find .hrtk-kw-suggest {
		position: static;
		flex-direction: row;
		align-items: center;
		width: 100%;
		margin: 10px 0 0;
		padding: 0 0 2px;
		overflow-x: auto;
		border: 0;
		border-radius: 0;
		background: none;
		color: inherit;
		box-shadow: none;
		scrollbar-width: none;
		-webkit-overflow-scrolling: touch;
	}

	.hrtk-kw-find:not(.hrtk-kw-find--chips) .hrtk-kw-suggest-label {
		display: none;
	}

	.hrtk-kw-find:not(.hrtk-kw-find--chips) .hrtk-kw-chips {
		flex-wrap: nowrap;
	}

	.hrtk-kw-quote {
		font-size: 14px;
	}
}

.hrtk-msheet-scroll .hrtk-kw-find,
.hrtk-msheet-scroll .hrtk-kw-row .hrtk-kw-find {
	flex: 1 0 100%;
	flex-wrap: wrap;
	order: 10;
	justify-content: center;
	min-height: 44px;
}

.hrtk-msheet-scroll .hrtk-kw-row {
	min-height: 44px;
	margin: 0 0 12px;
}

.hrtk-msheet-scroll .hrtk-kw-find .hrtk-kw-pill {
	padding: 9px 16px 9px 13px;
	font-size: 14.5px;
}

.hrtk-msheet-scroll .hrtk-kw-find .hrtk-kw-field {
	max-width: none;
	height: 44px;
	padding-left: 14px;
	animation-name: hrtk-kw-fade;
}

.hrtk-msheet-scroll .hrtk-kw-find .hrtk-kw-field input.hrtk-kw-input {
	font-size: 16px;
}

.hrtk-msheet-scroll .hrtk-kw-find .hrtk-kw-key {
	display: none;
}

.hrtk-msheet-scroll .hrtk-kw-find .hrtk-kw-suggest,
.hrtk-msheet-scroll .hrtk-kw-row .hrtk-kw-find .hrtk-kw-suggest {
	position: static;
	flex-direction: row;
	align-items: center;
	width: 100%;
	margin: 10px 0 0;
	padding: 0 0 2px;
	overflow-x: auto;
	border: 0;
	border-radius: 0;
	background: none;
	color: inherit;
	box-shadow: none;
	scrollbar-width: none;
	-webkit-overflow-scrolling: touch;
}

.hrtk-msheet-scroll .hrtk-kw-find .hrtk-kw-suggest-label {
	display: none;
}

.hrtk-msheet-scroll .hrtk-kw-find .hrtk-kw-chips {
	flex-wrap: nowrap;
}

.hrtk-msheet-scroll .hrtk-kw-quote {
	font-size: 14px;
}

/* ---- Searchbar Pro's filter chips row: the control leads it ----
   Closed, the pill is one of the row's chips: it carries Searchbar Pro's
   chip class and takes its rule, so the colors below are the row's own
   tokens with the fallbacks that rule uses, except in the open field: it
   is white whatever the section (the tokens go white on a dark one), so
   its text takes the light values outright. The served Searchbar Pro
   stylesheet armors every rule with :not(#\9):not(#\9) (specificity
   2,1,0): each rule here that must beat one of its rules on the row, the
   track or the pill carries the same armor. Open, one box travels in width
   between the pill, the field and the applied term (widths the script
   measures), the pill and the field cross-fade in place, and the chips
   slide over and fade at the field's edge. Nothing here reaches the other
   placements. */

@property --hrtk-kw-fade {
	syntax: '<length>';
	inherits: false;
	initial-value: 0px;
}

@keyframes hrtk-kw-pop-in {
	from {
		opacity: 0;
		transform: translateY(-6px);
	}
	to {
		opacity: 1;
		transform: none;
	}
}

/* Left-aligned: a centered row slid the pill sideways as it opened. */
.hrtk-sbp-quick-chips.hrtk-kw-chips-host:not(#\9):not(#\9) {
	justify-content: flex-start;
	gap: 0;
}

/* The track gives way as the box grows, on the same clock and curve, and
   its mask fades the chips at the field's edge while the field has the
   focus. Without @property the fade switches instead of tweening, and the
   mask keeps its opaque middle. */
.hrtk-kw-chips-host:not(#\9):not(#\9) > .hrtk-sbp-quick-chips__track {
	flex: 0 1 auto;
	min-width: 0;
	transition: --hrtk-kw-fade 0.36s cubic-bezier(0.22, 1, 0.36, 1);
	-webkit-mask-image: linear-gradient(to right, transparent 0, #000 max(var(--hrtk-qc-fade-l), var(--hrtk-kw-fade, 0px)), #000 calc(100% - var(--hrtk-qc-fade-r)), transparent 100%);
	mask-image: linear-gradient(to right, transparent 0, #000 max(var(--hrtk-qc-fade-l), var(--hrtk-kw-fade, 0px)), #000 calc(100% - var(--hrtk-qc-fade-r)), transparent 100%);
}

.hrtk-kw-chips-host.is-kw-focus:not(#\9):not(#\9) > .hrtk-sbp-quick-chips__track {
	--hrtk-kw-fade: 48px;
}

/* One box, as tall as a chip, whose width travels. */
.hrtk-kw-find.hrtk-kw-find--chips {
	display: block;
	flex: 0 0 auto;
	order: 0;
	width: var(--hrtk-kw-entry-w, 132px);
	height: 32px;
	min-height: 0;
	margin: 0 8px 0 0;
	transition: width 0.36s cubic-bezier(0.22, 1, 0.36, 1);
}

.hrtk-kw-find.hrtk-kw-find--chips:not(.is-collapsed) {
	width: 300px;
	max-width: 100%;
}

/* Applied: as wide as the term, measured. */
.hrtk-kw-find.hrtk-kw-find--chips.has-term:not(.is-focus) {
	width: var(--hrtk-kw-term-w, 300px);
}

/* Measured off screen, in the applied weight. Never wider than the cap. */
.hrtk-kw-find .hrtk-kw-ruler {
	position: absolute;
	top: 0;
	left: 0;
	max-width: 320px;
	overflow: hidden;
	visibility: hidden;
	font-size: 13px;
	font-weight: 700;
	line-height: 1;
	white-space: pre;
	pointer-events: none;
}

/* Closed: the pill is a chip. It stays laid out while faded out, at its
   own width whatever the box's (that width is the collapsed width, and a
   box narrower than the pill, an applied term's, must not squeeze it), and
   keeps a focus ring of its own. */
.hrtk-kw-find--chips .hrtk-kw-pill:not(#\9):not(#\9) {
	position: absolute;
	top: 0;
	left: 0;
	width: max-content;
	max-width: none;
	height: auto;
	opacity: 1;
	visibility: visible;
	transition: opacity 0.16s linear, visibility 0s linear 0s, border-color 0.15s ease, color 0.15s ease;
}

.hrtk-kw-find--chips:not(.is-collapsed) .hrtk-kw-pill:not(#\9):not(#\9) {
	display: inline-flex;
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	transition: opacity 0.16s linear, visibility 0s linear 0.16s, border-color 0.15s ease, color 0.15s ease;
}

.hrtk-kw-find--chips .hrtk-kw-pill:not(#\9):not(#\9):focus-visible {
	border-color: var(--hrtk-kw-a);
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--hrtk-kw-a) 20%, transparent);
}

.hrtk-kw-find--chips .hrtk-kw-pill .hrtk-kw-icon,
.hrtk-kw-find--chips .hrtk-kw-field > .hrtk-kw-icon {
	width: 16px;
	height: 16px;
	opacity: 1;
}

.hrtk-kw-find--chips .hrtk-kw-field > .hrtk-kw-icon {
	color: #5b6069;
}

/* Open: the field fills the box, with its icon where the pill's was. White,
   with the light text values (the clear button and the key hint inherit
   them), on light and dark sections alike. */
.hrtk-kw-find.hrtk-kw-find--chips .hrtk-kw-field {
	position: absolute;
	inset: 0;
	display: flex;
	width: auto;
	max-width: none;
	height: 32px;
	padding: 0 3px 0 12px;
	gap: 6px;
	overflow: hidden;
	border-color: color-mix(in srgb, #1f2329 24%, transparent);
	background: #fff;
	color: #1f2329;
	opacity: 1;
	visibility: visible;
	animation: none;
	transition: opacity 0.16s linear, visibility 0s linear 0s, border-color 0.2s ease, background-color 0.2s ease, box-shadow 0.2s ease;
}

.hrtk-kw-find.hrtk-kw-find--chips.is-collapsed .hrtk-kw-field {
	display: flex;
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	transition: opacity 0.16s linear, visibility 0s linear 0.16s;
}

.hrtk-kw-find.hrtk-kw-find--chips.is-focus .hrtk-kw-field {
	border-color: var(--hrtk-kw-a);
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--hrtk-kw-a) 20%, transparent);
}

.hrtk-kw-find--chips .hrtk-kw-field input.hrtk-kw-input {
	color: #1f2329;
	font-size: 13px;
	font-weight: 500;
	line-height: 1;
}

.hrtk-kw-find--chips .hrtk-kw-field input.hrtk-kw-input::placeholder {
	color: #5b6069;
}

.hrtk-kw-find--chips .hrtk-kw-clear {
	width: 24px;
	height: 24px;
}

/* Applied: the term settles into an active chip, outlined and bold, back
   in the row's own colors (it is transparent again). */
.hrtk-kw-find.hrtk-kw-find--chips.has-term:not(.is-focus) .hrtk-kw-field {
	border-color: var(--hrtk-qc-text-strong, #1f2329);
	background: transparent;
	color: var(--hrtk-qc-text-strong, #1f2329);
	box-shadow: none;
}

.hrtk-kw-find.hrtk-kw-find--chips.has-term:not(.is-focus) .hrtk-kw-field input.hrtk-kw-input {
	color: var(--hrtk-qc-text-strong, #1f2329);
	font-weight: 700;
}

.hrtk-kw-find.hrtk-kw-find--chips.has-term:not(.is-focus) .hrtk-kw-field > .hrtk-kw-icon {
	color: var(--hrtk-qc-text-strong, #1f2329);
}

/* The suggestions arrive under the field once it has opened, at the
   control's start edge (the right one on a right-to-left page). */
.hrtk-kw-find--chips .hrtk-kw-suggest {
	inset-inline-start: 0;
	inset-inline-end: auto;
	animation: hrtk-kw-pop-in 0.22s ease-out 0.14s backwards;
}

/* ---- Reduced motion: no grow, no fade, no spin ---- */

@media (prefers-reduced-motion: reduce) {
	.hrtk-kw-find .hrtk-kw-field,
	.hrtk-kw-row .hrtk-kw-find .hrtk-kw-field,
	.hrtk-msheet-scroll .hrtk-kw-find .hrtk-kw-field,
	.hrtk-kw-find--chips .hrtk-kw-suggest,
	.hrtk-kw-spinner {
		animation: none;
	}

	.hrtk-kw-find .hrtk-kw-pill,
	.hrtk-kw-find .hrtk-kw-field,
	.hrtk-kw-find .hrtk-kw-term,
	.hrtk-kw-zero .hrtk-kw-term,
	.hrtk-kw-find.hrtk-kw-find--chips,
	.hrtk-kw-find.hrtk-kw-find--chips .hrtk-kw-field,
	.hrtk-kw-find.hrtk-kw-find--chips.is-collapsed .hrtk-kw-field,
	.hrtk-kw-find.hrtk-kw-find--chips .hrtk-kw-pill:not(#\9):not(#\9),
	.hrtk-kw-chips-host:not(#\9):not(#\9) > .hrtk-sbp-quick-chips__track {
		transition: none;
	}
}