/* Colours are set with these custom properties. Override them in your theme CSS.
   :where() gives these defaults no specificity, so a theme wins whichever stylesheet loads last. */
:where(:root) {
	--exactfind-accent: #1d4ed8;
	--exactfind-accent-text: #fff;
	--exactfind-border: #d1d5db;
	--exactfind-muted: #6b7280;
	--exactfind-surface: #fff;
	--exactfind-text: inherit;
}

.exactfind {
	color: var( --exactfind-text );
	margin-block: 1em;
}

.exactfind__welcome {
	margin: 0 0 0.5em;
}

.exactfind__form {
	display: flex;
	gap: 0.5em;
}

.exactfind__label {
	flex: 1;
	min-width: 0;
}

.exactfind__input {
	border: 1px solid var( --exactfind-border );
	border-radius: 6px;
	box-sizing: border-box;
	font: inherit;
	padding: 0.6em 0.75em;
	width: 100%;
}

.exactfind__button,
.exactfind-float__toggle {
	background: var( --exactfind-accent );
	border: 0;
	border-radius: 6px;
	color: var( --exactfind-accent-text );
	cursor: pointer;
	font: inherit;
	padding: 0.6em 1em;
}

.exactfind__button:disabled {
	cursor: wait;
	opacity: 0.6;
}

.exactfind__result {
	margin-top: 1em;
}

.exactfind__answer {
	margin: 0;
	white-space: pre-wrap;
}

.exactfind__sources {
	font-size: 0.9em;
	margin-top: 1em;
}

.exactfind__sources p {
	font-weight: 600;
	margin: 0 0 0.25em;
}

.exactfind__sources ul {
	margin: 0;
	padding-left: 1.2em;
}

.exactfind__disclaimer {
	color: var( --exactfind-muted );
	font-size: 0.8em;
	margin: 1em 0 0;
}

.exactfind-float {
	align-items: flex-end;
	bottom: var( --exactfind-float-y, 20px );
	display: flex;
	flex-direction: column-reverse;
	gap: 0.5em;
	max-width: calc( 100vw - 2 * var( --exactfind-float-x, 20px ) );
	position: fixed;
	right: var( --exactfind-float-x, 20px );
	z-index: 9999;
}

.exactfind-float--left {
	align-items: flex-start;
	left: var( --exactfind-float-x, 20px );
	right: auto;
}

.exactfind-float__panel {
	background: var( --exactfind-surface );
	border: 1px solid var( --exactfind-border );
	border-radius: 8px;
	box-shadow: 0 8px 24px rgb( 0 0 0 / 15% );
	box-sizing: border-box;
	color: #1f2937;
	max-height: min( 640px, calc( 100dvh - var( --exactfind-float-y, 20px ) - 120px ) );
	max-width: 100%;
	overflow: auto;
	padding: 0.25em 1em;
	width: 360px;
}

.exactfind-challenge {
	bottom: 20px;
	left: 50%;
	position: fixed;
	transform: translateX( -50% );
	z-index: 10000;
}