/**
 * Studio Global Search — front end
 *
 * Every colour is a token. Light values are declared on the base class so the
 * component never inherits an unreadable colour from the theme; dark values are
 * only applied when the site owner asks for them.
 */

.sgs-search,
.sgs-overlay {
	/* Light palette — always defined, never conditional. */
	--sgs-accent: #061f56;
	--sgs-accent-text: #ffffff;
	--sgs-bg: #ffffff;
	--sgs-fg: #1a1c1f;
	--sgs-muted: #626873;
	--sgs-line: #e2e5ea;
	--sgs-soft: #f5f6f8;
	--sgs-mark-bg: #fff2a8;
	--sgs-mark-fg: #1a1c1f;
	--sgs-input-fg: #111111;
	--sgs-input-bg: #ffffff;
	--sgs-placeholder: #6b7280;
	--sgs-ring: rgba(6, 31, 86, .28);
	--sgs-overlay-scrim: rgba(12, 15, 22, .55);

	--sgs-radius: 12px;
	--sgs-font-size: 16px;
	--sgs-title-size: 17px;
	--sgs-pad: .8rem;
	--sgs-gap: .4rem;
	--sgs-media: 52px;
	--sgs-snippet-lines: 2;
	--sgs-shadow: 0 1px 2px rgba(16, 20, 28, .06), 0 8px 24px rgba(16, 20, 28, .08);

	position: relative;
	color: var(--sgs-fg);
	font-size: var(--sgs-font-size);
	line-height: 1.5;
	max-width: 100%;
	text-align: left;
}

.sgs-overlay {
	position: fixed;
	color: var(--sgs-fg);
	font-size: var(--sgs-font-size);
	line-height: 1.5;
	text-align: left;
}

/* Explicit dark mode, chosen in settings. */
.sgs-search.sgs-theme--dark,
.sgs-overlay.sgs-theme--dark {
	--sgs-bg: #16181c;
	--sgs-fg: #eceef1;
	--sgs-muted: #9aa1ad;
	--sgs-line: #2c3038;
	--sgs-soft: #1d2026;
	--sgs-mark-bg: #4d4210;
	--sgs-mark-fg: #ffe98a;
	--sgs-input-fg: #f5f6f8;
	--sgs-input-bg: #22262d;
	--sgs-placeholder: #9aa1ad;
	--sgs-shadow: 0 1px 2px rgba(0, 0, 0, .4), 0 8px 24px rgba(0, 0, 0, .45);
	--sgs-overlay-scrim: rgba(0, 0, 0, .7);
}

/* Follow the visitor's OS — only when the owner opted into "Auto". */
@media (prefers-color-scheme: dark) {
	.sgs-search.sgs-theme--auto,
	.sgs-overlay.sgs-theme--auto {
		--sgs-bg: #16181c;
		--sgs-fg: #eceef1;
		--sgs-muted: #9aa1ad;
		--sgs-line: #2c3038;
		--sgs-soft: #1d2026;
		--sgs-mark-bg: #4d4210;
		--sgs-mark-fg: #ffe98a;
		--sgs-input-fg: #f5f6f8;
		--sgs-input-bg: #22262d;
		--sgs-placeholder: #9aa1ad;
		--sgs-shadow: 0 1px 2px rgba(0, 0, 0, .4), 0 8px 24px rgba(0, 0, 0, .45);
		--sgs-overlay-scrim: rgba(0, 0, 0, .7);
	}
}

/* Borrow the theme's own colours. */
.sgs-search.sgs-theme--inherit {
	--sgs-bg: transparent;
	--sgs-fg: inherit;
	--sgs-muted: inherit;
	color: inherit;
}

.sgs-search.sgs-theme--inherit .sgs-item__snippet,
.sgs-search.sgs-theme--inherit .sgs-status,
.sgs-search.sgs-theme--inherit .sgs-item__meta {
	opacity: .75;
}

.sgs-search *,
.sgs-search *::before,
.sgs-search *::after,
.sgs-overlay *,
.sgs-overlay *::before,
.sgs-overlay *::after {
	box-sizing: border-box;
}

/* Belt and braces: never let a theme's global rule bleed in. */
.sgs-search .sgs-item__title,
.sgs-search .sgs-group__title,
.sgs-search .sgs-live__title,
.sgs-search .sgs-input,
.sgs-overlay .sgs-item__title,
.sgs-overlay .sgs-group__title,
.sgs-overlay .sgs-live__title,
.sgs-overlay .sgs-input {
	color: var(--sgs-fg);
}

.sgs-search .sgs-item__snippet,
.sgs-search .sgs-item__meta,
.sgs-search .sgs-status,
.sgs-search .sgs-live__meta,
.sgs-search .sgs-empty,
.sgs-overlay .sgs-item__snippet,
.sgs-overlay .sgs-item__meta,
.sgs-overlay .sgs-status,
.sgs-overlay .sgs-live__meta,
.sgs-overlay .sgs-empty {
	color: var(--sgs-muted);
}

.sgs-search a,
.sgs-search a:hover,
.sgs-search a:focus,
.sgs-search a:visited,
.sgs-overlay a,
.sgs-overlay a:hover,
.sgs-overlay a:focus,
.sgs-overlay a:visited {
	color: inherit;
	text-decoration: none;
}

/* ------------------------------------------------------------- Alignment -- */

.sgs-align--center {
	margin-left: auto;
	margin-right: auto;
	text-align: center;
}

.sgs-align--center .sgs-facets {
	justify-content: center;
}

.sgs-align--center .sgs-item__link,
.sgs-align--center .sgs-group__title,
.sgs-align--center .sgs-status {
	text-align: left;
}

.sgs-align--right {
	margin-left: auto;
}

.sgs-align--right .sgs-facets {
	justify-content: flex-end;
}

/* ---------------------------------------------------------------- Form -- */

.sgs-form {
	position: relative;
	margin: 0 0 1rem;
}

.sgs-field {
	display: flex;
	align-items: center;
	gap: .3rem;
	background: var(--sgs-input-bg);
	color: var(--sgs-input-fg);
	border: 1px solid var(--sgs-line);
	border-radius: var(--sgs-radius);
	padding: .28rem .28rem .28rem .75rem;
	transition: border-color .15s ease, box-shadow .15s ease;
}

/* No leading magnifier, so the text starts where the eye expects it. */
.sgs-field--bare {
	padding-left: .85rem;
}

.sgs-theme--inherit .sgs-field {
	background: transparent;
}

.sgs-field:focus-within {
	border-color: var(--sgs-accent);
	box-shadow: 0 0 0 3px var(--sgs-ring);
}

.sgs-field__icon {
	display: inline-flex;
	color: var(--sgs-muted);
	flex: 0 0 auto;
}

.sgs-icon {
	width: 20px;
	height: 20px;
	display: block;
	max-width: none;
	flex: 0 0 auto;
}

/* Themes set a global fill on svg surprisingly often, which turns a stroked
   outline icon into a solid blob — or into nothing at all when the fill
   happens to match the background behind it. Paths that genuinely want a fill
   set it on themselves, and a presentation attribute on the child beats an
   inherited value, so this is safe for the filled glyphs too. */
.sgs-search .sgs-icon,
.sgs-overlay .sgs-icon,
.sgs-lightbox .sgs-icon {
	fill: none !important;
	stroke: currentColor !important;
}

.sgs-input {
	flex: 1 1 auto;
	min-width: 0;
	outline: 0;
	margin: 0;
	max-width: none;
	font: inherit;
	/* 16px minimum stops iOS Safari zooming the page on focus. */
	font-size: max(16px, var(--sgs-font-size));
	padding: .6rem .25rem;
	-webkit-appearance: none;
	appearance: none;
	border-radius: 0;
}

/* What you type must always be legible. Themes routinely set a global colour
   on inputs — sometimes with !important, sometimes via -webkit-text-fill-color,
   which silently beats `color` in WebKit — so this one property is forced.
   The colour itself is a setting (Colours & formatting → Text you type). */
.sgs-search .sgs-input,
.sgs-overlay .sgs-input,
.sgs-search input.sgs-input,
.sgs-overlay input.sgs-input {
	border: 0 !important;
	box-shadow: none !important;
	height: auto !important;
	min-height: 0 !important;
	padding: .6rem .25rem !important;
	margin: 0 !important;
	border-radius: 0 !important;
	color: var(--sgs-input-fg) !important;
	-webkit-text-fill-color: var(--sgs-input-fg) !important;
	background-color: var(--sgs-input-bg) !important;
	caret-color: var(--sgs-input-fg);
	opacity: 1 !important;
}

.sgs-theme--inherit .sgs-input {
	background-color: transparent !important;
}

.sgs-search .sgs-input::placeholder,
.sgs-overlay .sgs-input::placeholder {
	color: var(--sgs-placeholder) !important;
	-webkit-text-fill-color: var(--sgs-placeholder) !important;
	opacity: 1 !important;
}

/* Browser autofill repaints the field; keep our colours. */
.sgs-input:-webkit-autofill,
.sgs-input:-webkit-autofill:hover,
.sgs-input:-webkit-autofill:focus {
	-webkit-text-fill-color: var(--sgs-input-fg) !important;
	box-shadow: inset 0 0 0 1000px var(--sgs-input-bg) !important;
	transition: background-color 9999s ease-in-out 0s;
}

.sgs-input::-webkit-search-cancel-button,
.sgs-input::-webkit-search-decoration {
	-webkit-appearance: none;
	display: none;
}

/* Themes style every <button> on the page — that is how these turned into
   blank orange slabs. Reset hard, scoped tightly enough to win, then build
   back up as plain icons. */
.sgs-search .sgs-clear,
.sgs-overlay .sgs-clear,
.sgs-search .sgs-submit,
.sgs-overlay .sgs-submit,
.sgs-search .sgs-close,
.sgs-overlay .sgs-close {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	flex: 0 0 auto;
	border: 0 !important;
	outline: 0;
	background: transparent !important;
	background-image: none !important;
	box-shadow: none !important;
	text-shadow: none;
	margin: 0;
	min-width: 0 !important;
	min-height: 0 !important;
	width: auto;
	height: auto;
	max-width: none;
	padding: 0 !important;
	font-family: inherit;
	font-weight: 500;
	font-size: inherit;
	letter-spacing: normal !important;
	text-transform: none !important;
	text-decoration: none;
	line-height: 0;
	cursor: pointer;
	-webkit-tap-highlight-color: transparent;
	-webkit-appearance: none;
	appearance: none;
	transition: color .15s ease, background-color .15s ease;
}

/* The reset above drops the browser's own focus ring, so these controls get
   an explicit one — a background tint alone is nowhere near visible enough
   for the only button that closes a full-screen panel. */
.sgs-search .sgs-clear:focus-visible,
.sgs-overlay .sgs-clear:focus-visible,
.sgs-search .sgs-submit:focus-visible,
.sgs-overlay .sgs-submit:focus-visible,
.sgs-search .sgs-close:focus-visible,
.sgs-overlay .sgs-close:focus-visible {
	outline: 2px solid var(--sgs-accent);
	outline-offset: 2px;
}

/* Fingers need more than 32px, whatever the size setting says. */
@media (pointer: coarse) {
	.sgs-search .sgs-close,
	.sgs-overlay .sgs-close,
	.sgs-search .sgs-submit,
	.sgs-overlay .sgs-submit {
		min-width: 44px;
		min-height: 44px;
	}

	.sgs-search .sgs-submit--icon,
	.sgs-overlay .sgs-submit--icon {
		width: 44px;
	}

	.sgs-search .sgs-clear,
	.sgs-overlay .sgs-clear {
		width: 36px;
		height: 36px;
	}
}

/* A small × inside the field that only clears what was typed. Closing the
   panel is a separate control, in the corner. */
.sgs-search .sgs-clear,
.sgs-overlay .sgs-clear {
	width: 26px;
	height: 26px;
	border-radius: 50%;
	color: var(--sgs-placeholder) !important;
	padding: 0;
}

.sgs-clear[hidden] {
	display: none !important;
}

.sgs-search .sgs-clear:hover,
.sgs-overlay .sgs-clear:hover,
.sgs-search .sgs-clear:focus-visible,
.sgs-overlay .sgs-clear:focus-visible {
	color: var(--sgs-fg) !important;
	background: var(--sgs-soft) !important;
}

.sgs-clear .sgs-icon {
	width: 14px;
	height: 14px;
	stroke-width: 2.6;
}

/* The magnifier is the submit button: an icon, not a slab. */
.sgs-search .sgs-submit,
.sgs-overlay .sgs-submit {
	gap: .4rem;
	height: var(--sgs-control, 32px);
	min-width: var(--sgs-control, 32px) !important;
	padding: 0 .55rem !important;
	font-size: .92em;
	border-radius: calc(var(--sgs-radius) - 5px);
	color: var(--sgs-icon, var(--sgs-accent)) !important;
	font-size: .92em;
	line-height: 1;
}

.sgs-search .sgs-submit--icon,
.sgs-overlay .sgs-submit--icon {
	width: var(--sgs-control, 32px);
	padding: 0 !important;
	border-radius: 50%;
}

.sgs-search .sgs-submit:hover,
.sgs-overlay .sgs-submit:hover,
.sgs-search .sgs-submit:focus-visible,
.sgs-overlay .sgs-submit:focus-visible {
	background: var(--sgs-soft) !important;
}

/* The old filled look, for anyone who wants the button to read as a button. */
.sgs-search .sgs-submit--fill,
.sgs-overlay .sgs-submit--fill {
	background: var(--sgs-accent) !important;
	color: var(--sgs-accent-text) !important;
}

/* Filling is a colour choice, not a shape choice. */
.sgs-search .sgs-submit--icon.sgs-submit--fill,
.sgs-overlay .sgs-submit--icon.sgs-submit--fill {
	border-radius: 50%;
}

.sgs-search .sgs-submit--fill:hover,
.sgs-overlay .sgs-submit--fill:hover {
	filter: brightness(1.08);
	background: var(--sgs-accent) !important;
}

.sgs-submit .sgs-icon {
	width: 18px;
	height: 18px;
	stroke-width: 2.1;
}

.sgs-submit--icon .sgs-submit__label {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(1px, 1px, 1px, 1px);
	clip-path: inset(50%);
	white-space: nowrap;
}

.sgs-search.is-busy .sgs-field {
	border-color: var(--sgs-accent);
}

/* ----------------------------------------------- Page-builder / menu fit -- */

/* Sit neatly inside an Elementor container or a theme menu without
   stretching the row or inheriting a link's underline. */
.sgs-elementor .sgs-search,
.sgs-menu-item .sgs-search {
	max-width: 100%;
}

.sgs-menu-item {
	display: flex;
	align-items: center;
}

.sgs-menu-item > .sgs-search {
	margin: 0;
}

.sgs-menu-item .sgs-trigger,
.sgs-elementor .sgs-trigger {
	text-decoration: none;
}

/* A builder's icon control may hand us an <i> or an <svg>. */
.sgs-trigger i,
.sgs-field__icon i {
	font-style: normal;
	line-height: 1;
	display: inline-flex;
}

.sgs-trigger svg:not(.sgs-icon),
.sgs-field__icon svg:not(.sgs-icon) {
	width: var(--sgs-trigger-size, 22px);
	height: var(--sgs-trigger-size, 22px);
	fill: currentColor;
	display: block;
}

/* An SVG with no width of its own defaults to 300x150, which would burst the
   field open. The submit button is a fixed square, so pin it. */
.sgs-submit svg:not(.sgs-icon) {
	width: 17px;
	height: 17px;
	fill: currentColor;
	display: block;
}

.sgs-submit i {
	font-style: normal;
	font-size: 15px;
	line-height: 1;
	display: inline-flex;
}

/* Inert inside a builder's editor. */
.sgs-search[data-sgs-preview="1"] .sgs-trigger {
	cursor: default;
}

/* ------------------------------------------------------------- Trigger -- */

.sgs-trigger {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: .5rem;
	font: inherit;
	font-weight: 600;
	cursor: pointer;
	color: var(--sgs-fg);
	background: transparent;
	border: 0;
	padding: 0;
	line-height: 1;
	min-width: 44px;
	min-height: 44px;
	border-radius: var(--sgs-radius);
	transition: background .15s ease, border-color .15s ease, color .15s ease;
	-webkit-tap-highlight-color: transparent;
}

.sgs-trigger .sgs-icon {
	width: var(--sgs-trigger-size, 22px);
	height: var(--sgs-trigger-size, 22px);
}

.sgs-trigger__label {
	white-space: nowrap;
}

.sgs-trigger:hover {
	color: var(--sgs-accent);
}

.sgs-trigger:focus-visible {
	outline: 2px solid var(--sgs-accent);
	outline-offset: 3px;
}

.sgs-trigger--outline {
	border: 1px solid var(--sgs-line);
	padding: 0 1rem;
}

.sgs-trigger--outline:hover {
	border-color: var(--sgs-accent);
}

.sgs-trigger--solid {
	background: var(--sgs-accent);
	color: var(--sgs-accent-text);
	padding: 0 1.1rem;
}

.sgs-trigger--solid:hover {
	color: var(--sgs-accent-text);
	filter: brightness(1.08);
}

.sgs-trigger--circle {
	border: 1px solid var(--sgs-line);
	border-radius: 999px;
	width: 44px;
	padding: 0;
}

.sgs-trigger--circle .sgs-trigger__label {
	display: none;
}

.sgs-trigger--circle:hover {
	border-color: var(--sgs-accent);
}

.sgs-mode--icon > .sgs-trigger .sgs-trigger__label {
	display: none;
}

/* ------------------------------------------------------- Expanding bar -- */

.sgs-mode--bar .sgs-form {
	margin-bottom: 0;
}

.sgs-mode--bar .sgs-field {
	width: 44px;
	padding-left: .55rem;
	padding-right: .55rem;
	cursor: pointer;
	transition: width .22s ease, padding .22s ease, border-color .15s ease;
	overflow: hidden;
}

/* visibility, not just opacity: an invisible button that still takes focus is
   how a keyboard user ends up submitting an empty search. */
.sgs-mode--bar .sgs-input,
.sgs-mode--bar .sgs-submit,
.sgs-mode--bar .sgs-clear {
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	transition: opacity .12s ease, visibility 0s linear .12s;
}

.sgs-mode--bar.is-expanded .sgs-field {
	width: min(100%, var(--sgs-bar-width, 380px));
	padding-left: .75rem;
	padding-right: .3rem;
	cursor: auto;
}

.sgs-mode--bar.is-expanded .sgs-input,
.sgs-mode--bar.is-expanded .sgs-submit {
	opacity: 1;
	visibility: visible;
	pointer-events: auto;
	transition: opacity .12s ease, visibility 0s;
}

.sgs-mode--bar.is-expanded .sgs-clear:not([hidden]) {
	opacity: 1;
	visibility: visible;
	pointer-events: auto;
	transition: opacity .12s ease, visibility 0s;
}

/* ------------------------------------------------------------- Overlay -- */

.sgs-overlay {
	position: fixed;
	inset: 0;
	z-index: 999999;
	display: flex;
	flex-direction: column;
	background: var(--sgs-overlay-scrim);
	-webkit-backdrop-filter: blur(3px);
	backdrop-filter: blur(3px);
	opacity: 0;
	visibility: hidden;
	transition: opacity .18s ease, visibility .18s ease;
	overscroll-behavior: contain;
}

.sgs-overlay[hidden] {
	display: none;
}

.sgs-overlay.is-open {
	opacity: 1;
	visibility: visible;
}

.sgs-overlay__panel {
	background: var(--sgs-bg);
	color: var(--sgs-fg);
	width: min(var(--sgs-panel-width, 880px), calc(100% - 2rem));
	max-width: 100%;
	/* Breathing room at the top so the panel never sits flush to the
	   browser chrome. */
	margin: var(--sgs-panel-offset, 24px) auto 0;
	border-radius: var(--sgs-radius);
	box-shadow: var(--sgs-shadow);
	display: flex;
	flex-direction: column;
	max-height: calc(100% - var(--sgs-panel-offset, 24px) - 1rem);
	overflow: hidden;
	transform: translateY(-12px);
	transition: transform .2s ease;
}

.sgs-overlay.is-open .sgs-overlay__panel {
	transform: translateY(0);
}

.sgs-overlay--center {
	justify-content: center;
	padding: 4vh 1rem;
}

.sgs-overlay--center .sgs-overlay__panel {
	border-radius: var(--sgs-radius);
	margin: 0 auto;
	max-height: 92vh;
}

.sgs-overlay--wide .sgs-overlay__panel {
	width: min(var(--sgs-panel-width, 1120px), calc(100% - 2rem));
}

.sgs-overlay__head {
	position: sticky;
	top: 0;
	z-index: 2;
	background: var(--sgs-bg);
	padding: .85rem 1rem .5rem;
	border-bottom: 1px solid var(--sgs-line);
}

.sgs-overlay__row {
	display: flex;
	align-items: center;
	gap: .5rem;
	width: 100%;
	max-width: 100%;
	min-width: 0;
}

/* min-width:0 is what keeps the close button inside the panel — without it a
   flex item refuses to shrink below its content width and pushes the button
   past the right edge. */
.sgs-overlay__row .sgs-form {
	flex: 1 1 auto;
	min-width: 0;
	margin: 0;
}

.sgs-overlay__row .sgs-field {
	min-width: 0;
	max-width: 100%;
}

/* One control, in the corner, that does one thing: close the panel. */
.sgs-search .sgs-close,
.sgs-overlay .sgs-close {
	gap: .35rem;
	width: var(--sgs-control, 32px);
	height: var(--sgs-control, 32px);
	padding: 0;
	border-radius: 50%;
	color: var(--sgs-muted) !important;
	font-size: .85em;
	white-space: nowrap;
}

.sgs-search .sgs-close:hover,
.sgs-overlay .sgs-close:hover,
.sgs-search .sgs-close:focus-visible,
.sgs-overlay .sgs-close:focus-visible {
	background: var(--sgs-soft) !important;
	color: var(--sgs-fg) !important;
}

.sgs-close .sgs-icon {
	width: 17px;
	height: 17px;
	stroke-width: 2.2;
}

.sgs-close__x {
	display: inline-flex;
	line-height: 0;
}

.sgs-close--icon .sgs-close__text {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(1px, 1px, 1px, 1px);
	clip-path: inset(50%);
	white-space: nowrap;
}

.sgs-search .sgs-close--text,
.sgs-overlay .sgs-close--text {
	width: auto;
	padding: 0 .65rem !important;
	border-radius: var(--sgs-radius);
	line-height: 1;
	font-size: .85em;
}

.sgs-close--text .sgs-close__x {
	display: none;
}


.sgs-overlay__body {
	flex: 1 1 auto;
	overflow-y: auto;
	-webkit-overflow-scrolling: touch;
	overscroll-behavior: contain;
	padding: .85rem 1rem calc(1rem + env(safe-area-inset-bottom, 0px));
}

/* Scroll lock.
   Desktop keeps the page exactly where it is and pads out the width the
   scrollbar used to occupy, so nothing shifts sideways when the panel opens.
   Touch devices have no visible scrollbar, so they use the fixed-body
   technique, which is the only thing iOS reliably respects. */
html.sgs-locked,
html.sgs-locked body {
	overflow: hidden !important;
}

html.sgs-locked body {
	padding-right: var(--sgs-scrollbar, 0px);
}

body.sgs-locked-fixed {
	position: fixed;
	width: 100%;
	overflow: hidden !important;
	touch-action: none;
}

/* ---------------------------------------------------- Live suggestions -- */

.sgs-live {
	position: absolute;
	z-index: 40;
	top: calc(100% + 6px);
	left: 0;
	right: 0;
	background: var(--sgs-bg);
	color: var(--sgs-fg);
	border: 1px solid var(--sgs-line);
	border-radius: var(--sgs-radius);
	box-shadow: var(--sgs-shadow);
	overflow: hidden;
	max-height: min(60vh, 460px);
	overflow-y: auto;
	-webkit-overflow-scrolling: touch;
	overscroll-behavior: contain;
}

.sgs-live[hidden] {
	display: none;
}

/* Inside the overlay the suggestions flow rather than float. */
.sgs-overlay .sgs-live {
	position: static;
	border: 0;
	box-shadow: none;
	max-height: none;
	background: transparent;
}

.sgs-live__list {
	list-style: none;
	margin: 0;
	padding: .25rem;
}

.sgs-live__item {
	margin: 0;
}

.sgs-live__link {
	display: flex;
	align-items: center;
	gap: .65rem;
	padding: .6rem;
	min-height: 44px;
	border-radius: 8px;
	text-decoration: none;
	color: inherit;
}

.sgs-live__item.is-active .sgs-live__link,
.sgs-live__link:hover,
.sgs-live__link:focus {
	background: var(--sgs-soft);
}

.sgs-live__icon {
	color: var(--sgs-icon, var(--sgs-accent));
	display: inline-flex;
	flex: 0 0 auto;
}

.sgs-live__body {
	min-width: 0;
}

.sgs-live__title {
	display: block;
	font-weight: 600;
	font-size: .95em;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.sgs-live__meta {
	display: block;
	font-size: .78em;
}

.sgs-live__empty {
	margin: 0;
	padding: .85rem;
	color: var(--sgs-muted);
	font-size: .9em;
}

.sgs-live__all {
	display: block;
	width: 100%;
	border: 0;
	border-top: 1px solid var(--sgs-line);
	background: transparent;
	color: var(--sgs-accent);
	font: inherit;
	font-weight: 600;
	font-size: .9em;
	padding: .8rem;
	min-height: 44px;
	cursor: pointer;
	text-align: center;
}

.sgs-live__all:hover {
	background: var(--sgs-soft);
}

/* ------------------------------------------------------------- Status -- */

.sgs-status {
	margin: 0 0 .75rem;
	font-size: .9em;
}

.sgs-status:empty {
	display: none;
}

/* ------------------------------------------------------------- Facets -- */

.sgs-facets {
	display: flex;
	flex-wrap: wrap;
	gap: .3rem;
	margin: 0 0 .9rem;
	align-items: center;
}

.sgs-facets:empty {
	display: none;
}

/* Themes routinely style every <button> on the page. Reset hard, then build
   back up, or the filters inherit huge padding and a brand colour. */
.sgs-search .sgs-facet,
.sgs-overlay .sgs-facet {
	display: inline-flex;
	align-items: center;
	gap: .35rem;
	box-sizing: border-box;
	border: 1px solid var(--sgs-line) !important;
	background: var(--sgs-bg) !important;
	background-image: none !important;
	color: var(--sgs-fg) !important;
	border-radius: 999px !important;
	padding: .2rem .55rem !important;
	min-height: 0 !important;
	/* `auto` is the flex default and means "never squash below the text".
	   Forcing 0 here is what collapsed a row of filters into overlapping
	   circles; it still has to be !important to beat a theme's min-width. */
	min-width: auto !important;
	height: auto !important;
	width: auto !important;
	max-width: none !important;
	/* Never shrink: the row scrolls sideways instead. */
	flex: 0 0 auto;
	margin: 0;
	font-family: inherit;
	font-size: .78em !important;
	font-weight: 500;
	line-height: 1.6;
	letter-spacing: 0 !important;
	text-transform: none !important;
	text-shadow: none !important;
	box-shadow: none !important;
	cursor: pointer;
	white-space: nowrap;
	transition: background .15s ease, border-color .15s ease, color .15s ease;
	-webkit-tap-highlight-color: transparent;
	-webkit-appearance: none;
	appearance: none;
}

.sgs-search.sgs-theme--inherit .sgs-facet,
.sgs-overlay.sgs-theme--inherit .sgs-facet {
	background: transparent !important;
}

.sgs-search .sgs-facet:hover,
.sgs-overlay .sgs-facet:hover {
	border-color: var(--sgs-accent) !important;
	background: var(--sgs-soft) !important;
	color: var(--sgs-fg) !important;
}

.sgs-search .sgs-facet.is-active,
.sgs-overlay .sgs-facet.is-active {
	background: var(--sgs-accent) !important;
	border-color: var(--sgs-accent) !important;
	color: var(--sgs-accent-text) !important;
}

.sgs-search .sgs-facet:focus-visible,
.sgs-overlay .sgs-facet:focus-visible {
	outline: 2px solid var(--sgs-accent);
	outline-offset: 2px;
}

.sgs-facet__count {
	font-size: .92em;
	opacity: .6;
	font-variant-numeric: tabular-nums;
}

/* Roomier variant for people who liked the old size. */
.sgs-search .sgs-facets--md .sgs-facet,
.sgs-overlay .sgs-facets--md .sgs-facet {
	font-size: .86em !important;
	padding: .35rem .8rem !important;
}

/* Text-only row, no chrome until active. */
.sgs-facets--tabs {
	gap: 0;
	border-bottom: 1px solid var(--sgs-line);
	margin-bottom: 1rem;
	flex-wrap: nowrap;
	overflow-x: auto;
	scrollbar-width: none;
}

.sgs-facets--tabs::-webkit-scrollbar {
	display: none;
}

.sgs-search .sgs-facets--tabs .sgs-facet,
.sgs-overlay .sgs-facets--tabs .sgs-facet {
	border: 0 !important;
	border-bottom: 2px solid transparent !important;
	border-radius: 0 !important;
	background: transparent !important;
	padding: .45rem .7rem !important;
	color: var(--sgs-muted) !important;
}

.sgs-search .sgs-facets--tabs .sgs-facet.is-active,
.sgs-overlay .sgs-facets--tabs .sgs-facet.is-active {
	background: transparent !important;
	color: var(--sgs-fg) !important;
	border-bottom-color: var(--sgs-accent) !important;
}

.sgs-facets--none {
	display: none;
}

/* Dropdown variant for very long category lists. */
.sgs-search .sgs-facet-select,
.sgs-overlay .sgs-facet-select {
	font: inherit;
	font-size: .85em !important;
	color: var(--sgs-fg) !important;
	background-color: var(--sgs-bg) !important;
	border: 1px solid var(--sgs-line) !important;
	border-radius: calc(var(--sgs-radius) - 4px) !important;
	padding: .35rem 1.8rem .35rem .6rem !important;
	min-height: 0 !important;
	height: auto !important;
	box-shadow: none !important;
	text-transform: none !important;
	max-width: 100%;
	cursor: pointer;
	-webkit-appearance: none;
	appearance: none;
	background-image: linear-gradient(45deg, transparent 50%, currentColor 50%), linear-gradient(135deg, currentColor 50%, transparent 50%);
	background-position: calc(100% - 15px) 55%, calc(100% - 10px) 55%;
	background-size: 5px 5px, 5px 5px;
	background-repeat: no-repeat;
}

/* --------------------------------------------------------- Sort control -- */

.sgs-toolbar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: .6rem;
	flex-wrap: wrap;
	margin: 0 0 .9rem;
}

.sgs-toolbar .sgs-facets {
	margin: 0;
	flex: 1 1 auto;
	min-width: 0;
}

.sgs-search .sgs-sort,
.sgs-overlay .sgs-sort {
	flex: 0 0 auto;
	font: inherit;
	font-size: .8em !important;
	color: var(--sgs-muted) !important;
	background-color: transparent !important;
	border: 1px solid var(--sgs-line) !important;
	border-radius: 999px !important;
	padding: .2rem 1.5rem .2rem .6rem !important;
	min-height: 0 !important;
	height: auto !important;
	box-shadow: none !important;
	text-transform: none !important;
	cursor: pointer;
	-webkit-appearance: none;
	appearance: none;
	background-image: linear-gradient(45deg, transparent 50%, currentColor 50%), linear-gradient(135deg, currentColor 50%, transparent 50%);
	background-position: calc(100% - 13px) 55%, calc(100% - 9px) 55%;
	background-size: 4px 4px, 4px 4px;
	background-repeat: no-repeat;
}

.sgs-search .sgs-sort:hover,
.sgs-overlay .sgs-sort:hover {
	border-color: var(--sgs-accent) !important;
	color: var(--sgs-fg) !important;
}

/* ------------------------------------------------- Empty / start state -- */

.sgs-start {
	padding: .25rem 0 1rem;
}

.sgs-start[hidden] {
	display: none;
}

.sgs-start__title {
	margin: 0 0 .5rem;
	font-size: .74em;
	font-weight: 700;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--sgs-muted);
}

.sgs-start__group + .sgs-start__group {
	margin-top: 1.1rem;
}

.sgs-chips {
	display: flex;
	flex-wrap: wrap;
	gap: .3rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.sgs-search .sgs-chip,
.sgs-overlay .sgs-chip {
	display: inline-flex;
	align-items: center;
	gap: .35rem;
	box-sizing: border-box;
	font-family: inherit;
	font-size: .84em;
	font-weight: 500;
	line-height: 1.6;
	text-transform: none;
	letter-spacing: 0;
	color: var(--sgs-fg);
	background: var(--sgs-soft);
	background-image: none;
	border: 1px solid transparent;
	border-radius: 999px;
	padding: .3rem .7rem;
	margin: 0;
	min-height: 0;
	height: auto;
	width: auto;
	box-shadow: none;
	text-shadow: none;
	cursor: pointer;
	-webkit-appearance: none;
	appearance: none;
}

.sgs-search .sgs-chip:hover,
.sgs-overlay .sgs-chip:hover {
	border-color: var(--sgs-accent);
	color: var(--sgs-fg);
}

.sgs-chip__icon {
	color: var(--sgs-muted);
	display: inline-flex;
}

.sgs-chip__icon .sgs-icon {
	width: 13px;
	height: 13px;
}

/* ------------------------------------------------------ See all in group -- */

.sgs-seeall {
	display: inline-flex;
	align-items: center;
	gap: .3rem;
	margin-top: .35rem;
	font-family: inherit;
	font-size: .84em;
	font-weight: 600;
	color: var(--sgs-accent);
	background: none;
	background-image: none;
	border: 0;
	padding: .3rem .55rem;
	box-shadow: none;
	text-shadow: none;
	cursor: pointer;
	-webkit-appearance: none;
	appearance: none;
}

.sgs-seeall:hover {
	text-decoration: underline;
}

/* --------------------------------------------------------------- Kbd hint -- */

.sgs-kbd {
	display: inline-flex;
	align-items: center;
	gap: .15rem;
	flex: 0 0 auto;
	border: 1px solid var(--sgs-line);
	border-radius: 5px;
	padding: .1rem .35rem;
	font-size: .7em;
	font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
	color: var(--sgs-muted);
	white-space: nowrap;
	pointer-events: none;
}

@media (max-width: 782px) {
	.sgs-kbd {
		display: none;
	}
}

/* ------------------------------------------------------------ Results -- */

.sgs-group {
	margin: 0 0 1.75rem;
}

.sgs-group__title {
	margin: 0 0 .5rem;
	font-size: .78em;
	font-weight: 700;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--sgs-muted);
}

.sgs-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: var(--sgs-gap);
}

.sgs-item {
	margin: 0;
	position: relative;
}

/* ------------------------------------------------------ Result actions -- */

.sgs-actions {
	position: absolute;
	top: calc(var(--sgs-pad) - .15rem);
	right: calc(var(--sgs-pad) - .15rem);
	display: flex;
	gap: .1rem;
	z-index: 2;
	opacity: 0;
	transition: opacity .12s ease;
}

.sgs-item:hover .sgs-actions,
.sgs-item:focus-within .sgs-actions,
.sgs-actions.is-open {
	opacity: 1;
}

/* Touch devices have no hover, so keep them visible but quiet. */
@media (hover: none) {
	.sgs-actions {
		opacity: .55;
	}
}

.sgs-search .sgs-act,
.sgs-overlay .sgs-act {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	width: 26px;
	height: 26px;
	min-height: 0;
	padding: 0;
	margin: 0;
	border: 0;
	border-radius: 6px;
	background: var(--sgs-bg);
	background-image: none;
	color: var(--sgs-muted);
	box-shadow: none;
	text-shadow: none;
	cursor: pointer;
	-webkit-appearance: none;
	appearance: none;
	-webkit-tap-highlight-color: transparent;
}

.sgs-search .sgs-act:hover,
.sgs-overlay .sgs-act:hover {
	background: var(--sgs-soft);
	color: var(--sgs-accent);
}

.sgs-act .sgs-icon {
	width: 15px;
	height: 15px;
}

.sgs-act.is-done {
	color: #16a34a;
}

/* Tooltip on hover / focus, CSS only. */
.sgs-tip {
	position: relative;
}

.sgs-tip::after {
	content: attr(data-sgs-tip);
	position: absolute;
	bottom: calc(100% + 6px);
	right: 0;
	background: var(--sgs-fg);
	color: var(--sgs-bg);
	font-size: 11px;
	font-weight: 500;
	line-height: 1.3;
	white-space: nowrap;
	padding: .25rem .45rem;
	border-radius: 5px;
	opacity: 0;
	visibility: hidden;
	transform: translateY(2px);
	transition: opacity .12s ease, transform .12s ease, visibility .12s;
	pointer-events: none;
	z-index: 5;
}

.sgs-tip:hover::after,
.sgs-tip:focus-visible::after {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}

@media (hover: none) {
	.sgs-tip::after {
		display: none;
	}
}

/* Share menu */
.sgs-share {
	position: relative;
}

.sgs-share__menu {
	position: absolute;
	top: calc(100% + 5px);
	right: 0;
	min-width: 148px;
	background: var(--sgs-bg);
	border: 1px solid var(--sgs-line);
	border-radius: 9px;
	box-shadow: var(--sgs-shadow);
	padding: .25rem;
	margin: 0;
	list-style: none;
	z-index: 10;
}

.sgs-share__menu[hidden] {
	display: none;
}

.sgs-search .sgs-share__menu button,
.sgs-overlay .sgs-share__menu button,
.sgs-lightbox .sgs-share__menu button {
	background: transparent !important;
	background-image: none !important;
	border: 0 !important;
	box-shadow: none !important;
	color: var(--sgs-fg) !important;
	font-size: .9em !important;
	font-weight: 400 !important;
	text-transform: none !important;
	letter-spacing: normal !important;
	min-width: 0 !important;
	min-height: 0 !important;
	border-radius: 0 !important;
}

.sgs-share__menu a,
.sgs-search .sgs-share__menu button,
.sgs-overlay .sgs-share__menu button,
.sgs-lightbox .sgs-share__menu button {
	display: flex;
	align-items: center;
	gap: .5rem;
	width: 100%;
	box-sizing: border-box;
	padding: .4rem .5rem;
	border: 0;
	border-radius: 6px;
	background: transparent;
	background-image: none;
	color: var(--sgs-fg);
	font-family: inherit;
	font-size: .82em;
	font-weight: 500;
	line-height: 1.4;
	text-align: left;
	text-transform: none;
	letter-spacing: 0;
	box-shadow: none;
	text-decoration: none;
	cursor: pointer;
	min-height: 0;
	height: auto;
	-webkit-appearance: none;
	appearance: none;
}

.sgs-share__menu a:hover,
.sgs-share__menu button:hover {
	background: var(--sgs-soft);
	color: var(--sgs-fg);
}

.sgs-share__menu .sgs-icon {
	width: 14px;
	height: 14px;
	flex: 0 0 auto;
	color: var(--sgs-muted);
}

/* Keep the action buttons clear of the text they sit over. */
.sgs-has-actions .sgs-item__title,
.sgs-has-actions .sgs-item__snippet {
	padding-right: 58px;
}

.sgs-layout--grid .sgs-actions {
	top: .5rem;
	right: .5rem;
}

.sgs-item__link {
	display: flex;
	gap: .9rem;
	align-items: flex-start;
	padding: var(--sgs-pad);
	border: 1px solid transparent;
	border-radius: var(--sgs-radius);
	text-decoration: none;
	color: var(--sgs-fg);
	transition: background .15s ease, border-color .15s ease;
	-webkit-tap-highlight-color: transparent;
}

.sgs-item__link:hover,
.sgs-item__link:focus-visible {
	background: var(--sgs-soft);
	border-color: var(--sgs-line);
}

.sgs-item__media {
	flex: 0 0 auto;
	width: var(--sgs-media);
	height: var(--sgs-media);
	border-radius: 9px;
	background: var(--sgs-soft);
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
	/* File-type icons get their own colour so they can carry the brand
	   without dragging buttons and links along with them. */
	color: var(--sgs-icon, var(--sgs-accent));
}

.sgs-item__thumb {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.sgs-item__icon .sgs-icon {
	width: 24px;
	height: 24px;
}

.sgs-item__body {
	min-width: 0;
	flex: 1 1 auto;
}

.sgs-item__title {
	display: block;
	font-weight: 600;
	font-size: var(--sgs-title-size);
	line-height: 1.35;
	margin-bottom: .15rem;
}

.sgs-item__snippet {
	font-size: .9em;
	overflow: hidden;
	display: -webkit-box;
	-webkit-line-clamp: var(--sgs-snippet-lines);
	line-clamp: var(--sgs-snippet-lines);
	-webkit-box-orient: vertical;
}

.sgs-item__meta {
	display: flex;
	flex-wrap: wrap;
	gap: .5rem;
	margin-top: .35rem;
	font-size: .76em;
}

.sgs-item__metabit {
	display: inline-flex;
	align-items: center;
}

.sgs-item__metabit + .sgs-item__metabit::before {
	content: "·";
	margin-right: .5rem;
}

.sgs-mark {
	background: var(--sgs-mark-bg);
	color: var(--sgs-mark-fg);
	border-radius: 3px;
	padding: 0 .12em;
}

/* ------------------------------------------------- Spoken-word moments -- */

.sgs-moments {
	list-style: none;
	margin: -.1rem 0 .3rem;
	padding: 0 0 0 calc(var(--sgs-media) + .9rem + var(--sgs-pad));
	display: grid;
	gap: .2rem;
}

.sgs-moment {
	margin: 0;
}

.sgs-moment__link {
	display: flex;
	gap: .6rem;
	align-items: baseline;
	padding: .4rem .55rem;
	border-radius: 8px;
	border-left: 2px solid var(--sgs-line);
	color: var(--sgs-muted);
	font-size: .86em;
	line-height: 1.45;
	text-decoration: none;
	transition: background .15s ease, border-color .15s ease;
}

.sgs-moment__link:hover,
.sgs-moment__link:focus-visible {
	background: var(--sgs-soft);
	border-left-color: var(--sgs-accent);
}

.sgs-moment__time {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	gap: .25rem;
	color: var(--sgs-accent);
	font-weight: 600;
	font-variant-numeric: tabular-nums;
}

.sgs-moment__time .sgs-icon {
	width: 13px;
	height: 13px;
}

.sgs-moment__text {
	min-width: 0;
	overflow: hidden;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	line-clamp: 2;
	-webkit-box-orient: vertical;
}

@media (max-width: 600px) {
	.sgs-moments {
		padding-left: var(--sgs-pad);
	}
}

/* Brief flash on the player we just jumped to. */
.sgs-seek-target {
	animation: sgs-seek-flash 1.6s ease-out 1;
}

@keyframes sgs-seek-flash {
	0% {
		box-shadow: 0 0 0 4px var(--sgs-ring, rgba(6, 31, 86, .4));
	}
	100% {
		box-shadow: 0 0 0 0 rgba(0, 0, 0, 0);
	}
}

.sgs-empty {
	padding: 1.5rem 0;
	margin: 0;
}

.sgs-suggestions {
	margin: .5rem 0 0;
	font-size: .9em;
	color: var(--sgs-muted);
}

.sgs-suggestions button {
	border: 0;
	background: none;
	color: var(--sgs-accent);
	font: inherit;
	cursor: pointer;
	text-decoration: underline;
	padding: .25rem;
}

/* ------------------------------------------------------------- Footer -- */

.sgs-footer {
	display: flex;
	justify-content: center;
	margin-top: 1rem;
}

.sgs-more {
	border: 1px solid var(--sgs-line);
	background: var(--sgs-bg);
	color: var(--sgs-fg);
	border-radius: 999px;
	padding: .7rem 1.4rem;
	min-height: 44px;
	font: inherit;
	font-weight: 600;
	font-size: .9em;
	cursor: pointer;
}

.sgs-theme--inherit .sgs-more {
	background: transparent;
}

.sgs-more:hover {
	border-color: var(--sgs-accent);
	color: var(--sgs-accent);
}

.sgs-more[hidden] {
	display: none;
}

/* ------------------------------------------------------------ Density -- */

.sgs-density--compact {
	--sgs-pad: .5rem;
	--sgs-gap: .15rem;
	--sgs-media: 38px;
	--sgs-snippet-lines: 1;
}

.sgs-density--roomy {
	--sgs-pad: 1.1rem;
	--sgs-gap: .65rem;
	--sgs-media: 64px;
	--sgs-snippet-lines: 3;
}

/* ------------------------------------------------------------ Layouts -- */

.sgs-layout--grid .sgs-list {
	grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
}

.sgs-layout--grid .sgs-item__link {
	flex-direction: column;
	border: 1px solid var(--sgs-line);
	height: 100%;
}

.sgs-layout--grid .sgs-item__media {
	width: 100%;
	height: 130px;
	border-radius: 8px;
}

.sgs-layout--compact .sgs-form {
	margin-bottom: 0;
}

.sgs-search .sgs-layout--compact .sgs-submit--text,
.sgs-layout--compact .sgs-submit--text,
.sgs-layout--compact .sgs-submit--both {
	padding: 0 .65rem !important;
}

.screen-reader-text {
	border: 0;
	clip: rect(1px, 1px, 1px, 1px);
	clip-path: inset(50%);
	height: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute;
	width: 1px;
	word-wrap: normal !important;
}

/* -------------------------------------------------------------- Mobile -- */

@media (max-width: 782px) {
	/* Edge to edge on a phone: the panel IS the screen. */
	.sgs-overlay__panel {
		width: 100%;
		max-width: 100%;
		max-height: 100%;
		height: 100%;
		margin: 0;
		border-radius: 0;
	}

	.sgs-overlay--center {
		padding: 0;
	}

	.sgs-overlay--center .sgs-overlay__panel,
	.sgs-overlay--wide .sgs-overlay__panel {
		width: 100%;
		border-radius: 0;
		margin: 0;
		max-height: 100%;
	}

	/* A partial sheet instead of full screen, when chosen. */
	.sgs-overlay--sheet .sgs-overlay__panel {
		height: auto;
		max-height: 88%;
		margin-top: auto;
		border-radius: var(--sgs-radius) var(--sgs-radius) 0 0;
	}

	.sgs-overlay--sheet {
		justify-content: flex-end;
	}

	.sgs-toolbar {
		gap: .4rem;
	}

	.sgs-sort {
		width: 100%;
	}

	.sgs-has-actions .sgs-item__title,
	.sgs-has-actions .sgs-item__snippet {
		padding-right: 52px;
	}

	.sgs-overlay__head {
		padding-top: calc(.85rem + env(safe-area-inset-top, 0px));
	}

	.sgs-layout--grid .sgs-list {
		grid-template-columns: 1fr;
	}

	.sgs-layout--grid .sgs-item__link {
		flex-direction: row;
	}

	.sgs-layout--grid .sgs-item__media {
		width: var(--sgs-media);
		height: var(--sgs-media);
	}

	/* Too many categories to fit, so the row scrolls sideways — with a fade
	   at the edge, or nobody discovers that it does. */
	.sgs-facets {
		flex-wrap: nowrap;
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
		scrollbar-width: none;
		padding-bottom: .25rem;
		margin-left: -.15rem;
		padding-left: .15rem;
		-webkit-mask-image: linear-gradient(to right, #000 calc(100% - 28px), transparent 100%);
		mask-image: linear-gradient(to right, #000 calc(100% - 28px), transparent 100%);
	}

	/* No fade once the row has been scrolled to the end. */
	.sgs-facets--end {
		-webkit-mask-image: none;
		mask-image: none;
	}

	.sgs-facets::-webkit-scrollbar {
		display: none;
	}

	.sgs-mode--bar.is-expanded .sgs-field {
		width: 100%;
	}
}

@media (max-width: 600px) {
	.sgs-search .sgs-submit--text,
	.sgs-overlay .sgs-submit--text,
	.sgs-search .sgs-submit--both,
	.sgs-overlay .sgs-submit--both {
		padding: 0 .65rem !important;
	}

	.sgs-item__title {
		font-size: calc(var(--sgs-title-size) - 1px);
	}

	.sgs-live {
		max-height: 50vh;
	}
}

@media (prefers-reduced-motion: reduce) {
	.sgs-search *,
	.sgs-overlay,
	.sgs-overlay__panel {
		transition: none !important;
	}
}

/* -------------------------------------------------------- Image viewer -- */

/* Appended to <body>, so it declares its own tokens rather than inheriting
   them from a panel it is not inside. */
.sgs-lightbox {
	--sgs-bg: #ffffff;
	--sgs-fg: #1a1c1f;
	--sgs-muted: #626873;
	--sgs-line: #e2e5ea;
	--sgs-soft: #f5f6f8;
	--sgs-radius: 12px;
	--sgs-accent: #061f56;
	--sgs-shadow: 0 1px 2px rgba(16, 20, 28, .06), 0 8px 24px rgba(16, 20, 28, .12);

	position: fixed;
	inset: 0;
	z-index: 1000000;
	display: flex;
	align-items: center;
	justify-content: center;
	/* Top padding leaves the toolbar its own strip, so a tall image never
	   slides underneath it. */
	padding: calc(clamp(.5rem, 3vw, 1.2rem) * 2 + 44px) clamp(.5rem, 3vw, 2rem) clamp(.5rem, 3vw, 2rem);
	opacity: 0;
	transition: opacity .18s ease;
	font-size: 15px;
	line-height: 1.5;
	color: var(--sgs-fg);
}

.sgs-lightbox[hidden] {
	display: none;
}

.sgs-lightbox.is-open {
	opacity: 1;
}

.sgs-lightbox.sgs-theme--dark {
	--sgs-bg: #16181c;
	--sgs-fg: #eceef1;
	--sgs-muted: #9aa1ad;
	--sgs-line: #2c3038;
	--sgs-soft: #1d2026;
	--sgs-shadow: 0 1px 2px rgba(0, 0, 0, .4), 0 8px 24px rgba(0, 0, 0, .45);
}

@media (prefers-color-scheme: dark) {
	.sgs-lightbox.sgs-theme--auto {
		--sgs-bg: #16181c;
		--sgs-fg: #eceef1;
		--sgs-muted: #9aa1ad;
		--sgs-line: #2c3038;
		--sgs-soft: #1d2026;
		--sgs-shadow: 0 1px 2px rgba(0, 0, 0, .4), 0 8px 24px rgba(0, 0, 0, .45);
	}
}

.sgs-lightbox *,
.sgs-lightbox *::before,
.sgs-lightbox *::after {
	box-sizing: border-box;
}

/* The viewer lives in <body>, outside every other scope in this file, so it
   carries its own reset against the theme's global button styling. */
.sgs-lightbox button {
	font-family: inherit;
	font-size: inherit;
	font-weight: 500;
	line-height: 0;
	letter-spacing: normal !important;
	text-transform: none !important;
	text-shadow: none !important;
	text-decoration: none;
	margin: 0;
	min-width: 0 !important;
	min-height: 0 !important;
	max-width: none;
	border: 0 !important;
	border-radius: 50% !important;
	box-shadow: none !important;
	background-image: none !important;
	padding: 0 !important;
	cursor: pointer;
	-webkit-appearance: none;
	appearance: none;
	-webkit-tap-highlight-color: transparent;
}

.sgs-lightbox .sgs-share__menu button {
	border-radius: 0 !important;
	line-height: 1.4;
	padding: .5rem .7rem !important;
	width: 100%;
	min-width: 0 !important;
}

.sgs-lightbox__scrim {
	position: absolute;
	inset: 0;
	background: rgba(8, 10, 14, .82);
	-webkit-backdrop-filter: blur(2px);
	backdrop-filter: blur(2px);
}

.sgs-lightbox__inner {
	position: relative;
	z-index: 1;
	display: flex;
	align-items: center;
	gap: .25rem;
	width: min(1100px, 100%);
	max-height: 100%;
}

.sgs-lightbox__figure {
	flex: 1 1 auto;
	min-width: 0;
	margin: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: .6rem;
	max-height: 100%;
}

.sgs-lightbox__img {
	display: block;
	max-width: 100%;
	/* Room for the toolbar above and the caption below. */
	max-height: calc(100vh - 12rem);
	width: auto;
	height: auto;
	border-radius: 8px;
	background: var(--sgs-soft);
	box-shadow: 0 18px 50px rgba(0, 0, 0, .45);
	transition: opacity .15s ease;
}

.sgs-lightbox.is-loading .sgs-lightbox__img {
	opacity: .35;
}

.sgs-lightbox__caption {
	color: #f2f4f7;
	text-align: center;
	font-size: .95em;
	text-shadow: 0 1px 3px rgba(0, 0, 0, .6);
	max-width: 60ch;
}

/* Toolbar floats over the top of the viewport, not the image, so it never
   shifts as images of different shapes load. */
.sgs-lightbox__bar {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	z-index: 3;
	display: flex;
	align-items: center;
	justify-content: flex-end;
	gap: .5rem;
	padding: clamp(.5rem, 3vw, 1.2rem) clamp(.5rem, 3vw, 2rem);
}

.sgs-lightbox__count {
	margin-right: auto;
	color: #cfd5de;
	font-size: .85em;
	font-variant-numeric: tabular-nums;
}

.sgs-lightbox__tools {
	display: flex;
	align-items: center;
	gap: .5rem;
}

/* The cloned actions come out of the result list, where they hide until the
   row is hovered. Here they are the point, so they are always visible. */
.sgs-lightbox .sgs-actions {
	position: static;
	opacity: 1;
	visibility: visible;
	pointer-events: auto;
	transform: none;
	display: flex;
	gap: .25rem;
}

.sgs-lightbox .sgs-act {
	background: rgba(255, 255, 255, .12) !important;
	color: #fff !important;
	border: 0 !important;
	box-shadow: none !important;
	width: 30px;
	height: 30px;
	border-radius: 50%;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0;
	cursor: pointer;
}

.sgs-lightbox .sgs-act:hover {
	background: rgba(255, 255, 255, .24) !important;
}

/* Copy confirmation still has to read as confirmation. */
.sgs-lightbox .sgs-act.is-done {
	background: #16a34a !important;
	color: #ffffff !important;
}

.sgs-lightbox .sgs-act:focus-visible,
.sgs-lightbox .sgs-lightbox__close:focus-visible,
.sgs-lightbox .sgs-lightbox__nav:focus-visible,
.sgs-lightbox .sgs-lightbox__open:focus-visible {
	outline: 2px solid #ffffff;
	outline-offset: 2px;
}

.sgs-lightbox .sgs-share__menu {
	background: var(--sgs-bg);
	color: var(--sgs-fg);
}

.sgs-lightbox__open {
	color: #cfd5de !important;
	font-size: .85em;
	text-decoration: underline;
	text-underline-offset: 3px;
	white-space: nowrap;
}

.sgs-lightbox__open:hover {
	color: #fff !important;
}

.sgs-lightbox__close {
	flex: 0 0 auto;
	width: 34px;
	height: 34px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0;
	border: 0 !important;
	border-radius: 50%;
	background: rgba(255, 255, 255, .12) !important;
	color: #fff !important;
	box-shadow: none !important;
	cursor: pointer;
	line-height: 0;
}

.sgs-lightbox__close:hover {
	background: rgba(255, 255, 255, .26) !important;
}

.sgs-lightbox__close .sgs-icon {
	width: 18px;
	height: 18px;
}

.sgs-lightbox__nav {
	flex: 0 0 auto;
	width: 40px;
	height: 40px;
	display: none;
	align-items: center;
	justify-content: center;
	padding: 0;
	border: 0 !important;
	border-radius: 50%;
	background: rgba(255, 255, 255, .12) !important;
	color: #fff !important;
	box-shadow: none !important;
	cursor: pointer;
	line-height: 0;
}

.sgs-lightbox.has-siblings .sgs-lightbox__nav {
	display: inline-flex;
}

.sgs-lightbox__nav:hover {
	background: rgba(255, 255, 255, .26) !important;
}

.sgs-lightbox__nav .sgs-icon {
	width: 20px;
	height: 20px;
}

@media (max-width: 600px) {
	.sgs-lightbox__inner {
		gap: 0;
	}

	.sgs-lightbox__img {
		max-height: calc(100vh - 13rem);
	}

	/* On a phone the arrows sit over the image rather than stealing its width. */
	.sgs-lightbox.has-siblings .sgs-lightbox__nav {
		position: absolute;
		top: 50%;
		transform: translateY(-50%);
		z-index: 2;
	}

	.sgs-lightbox__nav--prev {
		left: 0;
	}

	.sgs-lightbox__nav--next {
		right: 0;
	}

	.sgs-lightbox__bar {
		flex-wrap: wrap;
		gap: .4rem;
	}

	.sgs-lightbox .sgs-act,
	.sgs-lightbox__close,
	.sgs-lightbox__nav {
		width: 44px;
		height: 44px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.sgs-lightbox,
	.sgs-lightbox__img {
		transition: none !important;
	}
}

/* ------------------------------------------------------ Guidance: tips -- */

.sgs-search .sgs-help,
.sgs-overlay .sgs-help {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: .35rem;
	flex: 0 0 auto;
	width: var(--sgs-control, 32px);
	height: var(--sgs-control, 32px);
	min-width: 0 !important;
	min-height: 0 !important;
	padding: 0 !important;
	margin: 0;
	border: 0 !important;
	border-radius: 50% !important;
	background: transparent !important;
	background-image: none !important;
	box-shadow: none !important;
	color: var(--sgs-muted) !important;
	font: inherit;
	font-size: .85em !important;
	letter-spacing: normal !important;
	text-transform: none !important;
	line-height: 0;
	cursor: pointer;
	-webkit-appearance: none;
	appearance: none;
	transition: color .15s ease, background-color .15s ease;
}

.sgs-search .sgs-help:hover,
.sgs-overlay .sgs-help:hover,
.sgs-search .sgs-help.is-open,
.sgs-overlay .sgs-help.is-open {
	background: var(--sgs-soft) !important;
	color: var(--sgs-fg) !important;
}

.sgs-search .sgs-help:focus-visible,
.sgs-overlay .sgs-help:focus-visible {
	outline: 2px solid var(--sgs-accent);
	outline-offset: 2px;
}

.sgs-help .sgs-icon {
	width: 18px;
	height: 18px;
	stroke-width: 2;
}

/* The inline layout has room for a word next to the icon. */
.sgs-search .sgs-help--inline,
.sgs-overlay .sgs-help--inline {
	width: auto;
	border-radius: 999px !important;
	padding: .2rem .6rem .2rem .45rem !important;
	line-height: 1.6;
}

.sgs-help-line {
	margin: -.5rem 0 .9rem;
}

@media (pointer: coarse) {
	.sgs-search .sgs-help,
	.sgs-overlay .sgs-help {
		min-width: 44px !important;
		min-height: 44px !important;
	}
}

.sgs-tips {
	border: 1px solid var(--sgs-line);
	border-radius: var(--sgs-radius);
	background: var(--sgs-bg);
	padding: .85rem 1rem 1rem;
	margin: 0 0 1rem;
}

.sgs-tips[hidden] {
	display: none;
}

.sgs-tips__head {
	display: flex;
	align-items: center;
	gap: .5rem;
	margin-bottom: .6rem;
}

.sgs-search .sgs-tips__title,
.sgs-overlay .sgs-tips__title {
	flex: 1 1 auto;
	margin: 0 !important;
	padding: 0 !important;
	/* Themes style every heading on the page; without these the panel title
	   arrives as a 34px shout. */
	font-family: inherit !important;
	font-size: 1em !important;
	font-weight: 700 !important;
	line-height: 1.3 !important;
	color: var(--sgs-fg) !important;
	letter-spacing: normal !important;
	text-transform: none !important;
	border: 0 !important;
}

.sgs-search .sgs-tips__close,
.sgs-overlay .sgs-tips__close {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 28px;
	height: 28px;
	min-width: 0 !important;
	min-height: 0 !important;
	padding: 0 !important;
	border: 0 !important;
	border-radius: 50% !important;
	background: transparent !important;
	box-shadow: none !important;
	color: var(--sgs-muted) !important;
	line-height: 0;
	cursor: pointer;
	-webkit-appearance: none;
	appearance: none;
}

.sgs-tips__close:hover {
	background: var(--sgs-soft) !important;
	color: var(--sgs-fg) !important;
}

.sgs-tips__close .sgs-icon {
	width: 15px;
	height: 15px;
	stroke-width: 2.4;
}

/* Two aligned columns — examples read as a reference table rather than a
   ragged list. `display: contents` on the row lets the <li> take part. */
.sgs-tips__list {
	list-style: none;
	margin: 0 !important;
	padding: 0 !important;
	display: grid;
	grid-template-columns: max-content 1fr;
	align-items: start;
	gap: .55rem .75rem;
}

.sgs-tip-row {
	display: contents;
	margin: 0;
	padding: 0;
}

.sgs-tip-row::before,
.sgs-tip-row::marker {
	content: none;
}

@media (max-width: 600px) {
	.sgs-tips__list {
		grid-template-columns: 1fr;
		gap: .2rem;
	}

	.sgs-tip-row {
		display: block;
		margin-bottom: .7rem;
	}
}

/* The example is the control: clicking it runs that search. */
.sgs-search .sgs-tips__example,
.sgs-overlay .sgs-tips__example {
	flex: 0 0 auto;
	min-width: 0 !important;
	min-height: 0 !important;
	width: auto;
	max-width: 100%;
	margin: 0;
	justify-self: start;
	padding: .2rem .5rem !important;
	border: 1px solid var(--sgs-line) !important;
	border-radius: 6px !important;
	background: var(--sgs-soft) !important;
	background-image: none !important;
	box-shadow: none !important;
	color: var(--sgs-fg) !important;
	font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
	font-size: .82em !important;
	font-weight: 500;
	line-height: 1.5;
	letter-spacing: normal !important;
	text-transform: none !important;
	text-align: left;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	cursor: pointer;
	-webkit-appearance: none;
	appearance: none;
}

.sgs-search .sgs-tips__example:hover,
.sgs-overlay .sgs-tips__example:hover {
	border-color: var(--sgs-accent) !important;
	color: var(--sgs-accent) !important;
}

.sgs-search .sgs-tips__example:focus-visible,
.sgs-overlay .sgs-tips__example:focus-visible {
	outline: 2px solid var(--sgs-accent);
	outline-offset: 2px;
}

.sgs-tips__body {
	flex: 1 1 auto;
	min-width: 0;
}

.sgs-tips__label {
	display: block;
	font-size: .88em;
	font-weight: 600;
	color: var(--sgs-fg);
}

.sgs-tips__text {
	display: block;
	font-size: .85em;
	color: var(--sgs-muted);
	line-height: 1.45;
}

.sgs-tips__extra {
	margin: .8rem 0 0;
	font-size: .85em;
	color: var(--sgs-fg);
}

.sgs-tips__foot {
	display: flex;
	align-items: center;
	gap: .6rem;
	flex-wrap: wrap;
	margin-top: .9rem;
	padding-top: .7rem;
	border-top: 1px solid var(--sgs-line);
}

.sgs-tips__note {
	flex: 1 1 12rem;
	margin: 0;
	font-size: .82em;
	color: var(--sgs-muted);
}

.sgs-search .sgs-tips__tour,
.sgs-overlay .sgs-tips__tour {
	flex: 0 0 auto;
	min-width: 0 !important;
	min-height: 0 !important;
	margin: 0;
	padding: .25rem .7rem !important;
	border: 1px solid var(--sgs-line) !important;
	border-radius: 999px !important;
	background: transparent !important;
	background-image: none !important;
	box-shadow: none !important;
	color: var(--sgs-fg) !important;
	font: inherit;
	font-size: .82em !important;
	font-weight: 500;
	letter-spacing: normal !important;
	text-transform: none !important;
	line-height: 1.7;
	cursor: pointer;
	-webkit-appearance: none;
	appearance: none;
}

.sgs-search .sgs-tips__tour:hover,
.sgs-overlay .sgs-tips__tour:hover {
	border-color: var(--sgs-accent) !important;
	color: var(--sgs-accent) !important;
}

/* --------------------------------------------- Guidance: result notice -- */

.sgs-notice {
	display: flex;
	align-items: center;
	gap: .6rem;
	flex-wrap: wrap;
	margin: 0 0 .8rem;
	padding: .5rem .7rem;
	border-radius: calc(var(--sgs-radius) - 4px);
	background: var(--sgs-soft);
	font-size: .85em;
	color: var(--sgs-fg);
}

.sgs-notice:empty,
.sgs-notice-slot:empty {
	display: none;
}

.sgs-notice--quiet {
	background: transparent;
	padding-left: 0;
	padding-right: 0;
	color: var(--sgs-muted);
}

.sgs-notice__text {
	flex: 1 1 14rem;
}

.sgs-search .sgs-notice__action,
.sgs-overlay .sgs-notice__action {
	flex: 0 0 auto;
	min-width: 0 !important;
	min-height: 0 !important;
	margin: 0;
	padding: .2rem .65rem !important;
	border: 1px solid var(--sgs-accent) !important;
	border-radius: 999px !important;
	background: transparent !important;
	background-image: none !important;
	box-shadow: none !important;
	color: var(--sgs-accent) !important;
	font: inherit;
	font-size: .95em !important;
	font-weight: 600;
	letter-spacing: normal !important;
	text-transform: none !important;
	line-height: 1.6;
	cursor: pointer;
	-webkit-appearance: none;
	appearance: none;
}

.sgs-search .sgs-notice__action:hover,
.sgs-overlay .sgs-notice__action:hover {
	background: var(--sgs-accent) !important;
	color: var(--sgs-accent-text) !important;
}

/* ------------------------------------------- Guidance: quotation marks -- */

/* The quotation marks are the thing being taught, so they have to be the
   thing you notice. A monospace face keeps them from being swallowed by a
   theme's body font, where a pair of curly quotes can be almost invisible. */
.sgs-quoted {
	font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
	font-size: .95em;
	font-weight: 600;
	letter-spacing: 0;
	white-space: nowrap;
}

/*
 * Not `display: none` when empty: a live region that appears at the same
 * moment it gains content is generally not announced at all, because screen
 * readers only report mutations inside a region that was already rendered.
 * The slot stays in the layout at zero height and the hint inside it does the
 * appearing.
 */
.sgs-hint-slot:empty {
	height: 0;
	overflow: hidden;
}

.sgs-hint {
	display: flex;
	align-items: center;
	gap: .5rem;
	flex-wrap: wrap;
	margin: .45rem 0 0 !important;
	padding: 0;
	font-size: .84em;
	line-height: 1.5;
	color: var(--sgs-muted);
	animation: sgs-hint-in .18s ease-out;
}

@keyframes sgs-hint-in {
	from { opacity: 0; transform: translateY(-2px); }
	to   { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
	.sgs-hint {
		animation: none;
	}
}

.sgs-hint__text {
	flex: 0 1 auto;
}

.sgs-search .sgs-hint__try,
.sgs-overlay .sgs-hint__try {
	flex: 0 1 auto;
	min-width: 0 !important;
	min-height: 0 !important;
	max-width: 100%;
	margin: 0;
	padding: .12rem .5rem !important;
	border: 1px solid var(--sgs-accent) !important;
	border-radius: 999px !important;
	background: transparent !important;
	background-image: none !important;
	box-shadow: none !important;
	color: var(--sgs-accent) !important;
	font: inherit;
	/* A theme that sets font-size on every button wins over `font: inherit`,
	   which would leave this one line noticeably larger than the text above it. */
	font-size: .98em !important;
	font-weight: 600;
	letter-spacing: normal !important;
	text-transform: none !important;
	line-height: 1.6;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	cursor: pointer;
	-webkit-appearance: none;
	appearance: none;
}

.sgs-search .sgs-hint__try:hover,
.sgs-overlay .sgs-hint__try:hover {
	background: var(--sgs-accent) !important;
	color: var(--sgs-accent-text) !important;
}

.sgs-search .sgs-hint__try:focus-visible,
.sgs-overlay .sgs-hint__try:focus-visible,
.sgs-search .sgs-hint__close:focus-visible,
.sgs-overlay .sgs-hint__close:focus-visible {
	outline: 2px solid var(--sgs-accent);
	outline-offset: 2px;
}

.sgs-search .sgs-hint__close,
.sgs-overlay .sgs-hint__close {
	flex: 0 0 auto;
	width: 20px !important;
	height: 20px !important;
	min-width: 0 !important;
	min-height: 0 !important;
	margin: 0 0 0 auto;
	padding: 0 !important;
	border: 0 !important;
	border-radius: 999px !important;
	background: transparent !important;
	background-image: none !important;
	box-shadow: none !important;
	color: var(--sgs-muted) !important;
	line-height: 1;
	cursor: pointer;
	-webkit-appearance: none;
	appearance: none;
}

.sgs-search .sgs-hint__close:hover,
.sgs-overlay .sgs-hint__close:hover {
	color: var(--sgs-fg) !important;
}

.sgs-hint__close .sgs-icon {
	width: 12px;
	height: 12px;
	fill: none !important;
	stroke: currentColor !important;
}

/* The same offer at the foot of the quick-results dropdown. */
.sgs-search .sgs-live__phrase,
.sgs-overlay .sgs-live__phrase {
	display: flex;
	align-items: center;
	gap: .5rem;
	width: 100%;
	min-width: 0 !important;
	min-height: 0 !important;
	margin: 0;
	padding: .55rem .8rem !important;
	border: 0 !important;
	border-top: 1px solid var(--sgs-line) !important;
	border-radius: 0 !important;
	background: var(--sgs-soft) !important;
	background-image: none !important;
	box-shadow: none !important;
	color: var(--sgs-fg) !important;
	font: inherit;
	font-size: .84em !important;
	font-weight: 500;
	letter-spacing: normal !important;
	text-transform: none !important;
	text-align: left;
	line-height: 1.5;
	cursor: pointer;
	-webkit-appearance: none;
	appearance: none;
}

.sgs-search .sgs-live__phrase:hover,
.sgs-overlay .sgs-live__phrase:hover {
	background: var(--sgs-accent) !important;
	color: var(--sgs-accent-text) !important;
}

.sgs-live__phrase .sgs-icon {
	flex: 0 0 auto;
	width: 14px;
	height: 14px;
	fill: none !important;
	stroke: currentColor !important;
}

.sgs-live__phrase-text {
	flex: 1 1 auto;
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

/* The worked pair on the start screen: the same words with and without
   quotation marks, so the difference is visible rather than described. */
.sgs-start__group--teach {
	margin-top: 1rem;
	padding-top: .9rem;
	border-top: 1px solid var(--sgs-line);
}

.sgs-teach {
	list-style: none !important;
	margin: 0 !important;
	padding: 0 !important;
}

.sgs-teach__row {
	display: flex;
	align-items: baseline;
	gap: .55rem;
	margin: 0 0 .4rem !important;
	padding: 0 !important;
	font-size: .85em;
	line-height: 1.5;
}

.sgs-teach__row::before,
.sgs-teach__row::marker {
	content: none !important;
}

.sgs-search .sgs-teach__try,
.sgs-overlay .sgs-teach__try {
	flex: 0 0 auto;
	min-width: 0 !important;
	min-height: 0 !important;
	max-width: 60%;
	margin: 0;
	padding: .15rem .5rem !important;
	border: 1px solid var(--sgs-line) !important;
	border-radius: 6px !important;
	background: var(--sgs-soft) !important;
	background-image: none !important;
	box-shadow: none !important;
	color: var(--sgs-fg) !important;
	font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
	font-size: .92em !important;
	font-weight: 500;
	letter-spacing: normal !important;
	text-transform: none !important;
	text-align: left;
	line-height: 1.5;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	cursor: pointer;
	-webkit-appearance: none;
	appearance: none;
}

.sgs-search .sgs-teach__try.is-exact,
.sgs-overlay .sgs-teach__try.is-exact {
	border-color: var(--sgs-accent) !important;
	color: var(--sgs-accent) !important;
	font-weight: 700;
}

.sgs-search .sgs-teach__try:hover,
.sgs-overlay .sgs-teach__try:hover {
	background: var(--sgs-accent) !important;
	border-color: var(--sgs-accent) !important;
	color: var(--sgs-accent-text) !important;
}

.sgs-search .sgs-teach__try:focus-visible,
.sgs-overlay .sgs-teach__try:focus-visible,
.sgs-search .sgs-teach__more:focus-visible,
.sgs-overlay .sgs-teach__more:focus-visible {
	outline: 2px solid var(--sgs-accent);
	outline-offset: 2px;
}

.sgs-teach__label {
	flex: 1 1 auto;
	min-width: 0;
	color: var(--sgs-muted);
}

.sgs-search .sgs-teach__more,
.sgs-overlay .sgs-teach__more {
	min-width: 0 !important;
	min-height: 0 !important;
	margin: .3rem 0 0;
	padding: 0 !important;
	border: 0 !important;
	border-radius: 0 !important;
	background: none !important;
	box-shadow: none !important;
	color: var(--sgs-accent) !important;
	font: inherit;
	font-size: .82em !important;
	font-weight: 600;
	letter-spacing: normal !important;
	text-transform: none !important;
	text-decoration: underline;
	cursor: pointer;
	-webkit-appearance: none;
	appearance: none;
}

/* The way back out of a quoted search that found nothing. */
.sgs-suggestions--phrase {
	margin-top: .4rem;
	color: var(--sgs-muted);
}

.sgs-suggestions__lead {
	color: var(--sgs-muted);
}

.sgs-search .sgs-suggest-phrase,
.sgs-overlay .sgs-suggest-phrase {
	min-width: 0 !important;
	min-height: 0 !important;
	margin: 0;
	padding: 0 !important;
	border: 0 !important;
	border-radius: 0 !important;
	background: none !important;
	box-shadow: none !important;
	color: var(--sgs-accent) !important;
	font: inherit;
	font-size: 1em !important;
	font-weight: 600;
	letter-spacing: normal !important;
	text-transform: none !important;
	text-decoration: underline;
	cursor: pointer;
	-webkit-appearance: none;
	appearance: none;
}

@media (max-width: 600px) {
	.sgs-teach__row {
		flex-wrap: wrap;
		gap: .2rem .5rem;
	}

	.sgs-search .sgs-teach__try,
	.sgs-overlay .sgs-teach__try {
		max-width: 100%;
	}

	/* A close button pushed to the far right of a wrapped hint ends up
	   orphaned on its own line; keep it beside the text instead. */
	.sgs-search .sgs-hint__close,
	.sgs-overlay .sgs-hint__close {
		margin-left: 0;
	}
}

/* ---------------------------------------------- Guidance: Match control -- */

.sgs-toolbar__controls {
	display: inline-flex;
	align-items: center;
	gap: .35rem;
	flex: 0 0 auto;
	margin-left: auto;
}

.sgs-search .sgs-match,
.sgs-overlay .sgs-match {
	flex: 0 0 auto;
	font: inherit;
	font-size: .8em !important;
	color: var(--sgs-muted) !important;
	background-color: transparent !important;
	border: 1px solid var(--sgs-line) !important;
	border-radius: 999px !important;
	padding: .2rem 1.5rem .2rem .6rem !important;
	min-height: 0 !important;
	height: auto !important;
	box-shadow: none !important;
	text-transform: none !important;
	cursor: pointer;
	-webkit-appearance: none;
	appearance: none;
	background-image: linear-gradient(45deg, transparent 50%, currentColor 50%), linear-gradient(135deg, currentColor 50%, transparent 50%);
	background-position: calc(100% - 13px) 55%, calc(100% - 9px) 55%;
	background-size: 4px 4px, 4px 4px;
	background-repeat: no-repeat;
}

.sgs-search .sgs-match:hover,
.sgs-overlay .sgs-match:hover {
	border-color: var(--sgs-accent) !important;
	color: var(--sgs-fg) !important;
}

/* ------------------------------------------------ Guidance: walkthrough -- */

.sgs-tour {
	--sgs-bg: #ffffff;
	--sgs-fg: #1a1c1f;
	--sgs-muted: #626873;
	--sgs-line: #e2e5ea;
	--sgs-soft: #f5f6f8;
	--sgs-accent: #061f56;
	--sgs-accent-text: #ffffff;
	--sgs-radius: 12px;

	position: fixed;
	inset: 0;
	z-index: 1000001;
	pointer-events: none;
	opacity: 0;
	transition: opacity .16s ease;
	font-size: 15px;
	line-height: 1.5;
	color: var(--sgs-fg);
}

.sgs-tour[hidden] {
	display: none;
}

.sgs-tour.is-open {
	opacity: 1;
}

.sgs-tour.sgs-theme--dark {
	--sgs-bg: #16181c;
	--sgs-fg: #eceef1;
	--sgs-muted: #9aa1ad;
	--sgs-line: #2c3038;
	--sgs-soft: #1d2026;
}

@media (prefers-color-scheme: dark) {
	.sgs-tour.sgs-theme--auto {
		--sgs-bg: #16181c;
		--sgs-fg: #eceef1;
		--sgs-muted: #9aa1ad;
		--sgs-line: #2c3038;
		--sgs-soft: #1d2026;
	}
}

.sgs-tour *,
.sgs-tour *::before,
.sgs-tour *::after {
	box-sizing: border-box;
}

/* A ring rather than a dimming scrim: the point is to show where a control
   is, not to hide everything the visitor was just looking at. */
.sgs-tour__ring {
	position: fixed;
	border-radius: 10px;
	border: 2px solid var(--sgs-accent);
	box-shadow: 0 0 0 4px rgba(6, 31, 86, .18), 0 0 0 9999px rgba(10, 12, 18, .35);
	transition: top .18s ease, left .18s ease, width .18s ease, height .18s ease;
	pointer-events: none;
}

.sgs-tour__box {
	position: fixed;
	pointer-events: auto;
	background: var(--sgs-bg);
	color: var(--sgs-fg);
	border: 1px solid var(--sgs-line);
	border-radius: var(--sgs-radius);
	box-shadow: 0 10px 34px rgba(10, 12, 18, .28);
	padding: .85rem 1rem .9rem;
	transition: top .18s ease, left .18s ease;
}

.sgs-tour__count {
	margin: 0 0 .2rem;
	font-size: .76em;
	font-weight: 600;
	letter-spacing: .04em;
	text-transform: uppercase;
	color: var(--sgs-muted);
}

.sgs-tour .sgs-tour__title {
	margin: 0 0 .3rem !important;
	padding: 0 !important;
	font-family: inherit !important;
	font-size: 1.02em !important;
	font-weight: 700 !important;
	line-height: 1.3 !important;
	color: var(--sgs-fg) !important;
	letter-spacing: normal !important;
	text-transform: none !important;
	border: 0 !important;
}

.sgs-tour__text {
	margin: 0;
	font-size: .88em;
	line-height: 1.5;
	color: var(--sgs-muted);
}

.sgs-tour__foot {
	display: flex;
	align-items: center;
	gap: .5rem;
	margin-top: .9rem;
}

.sgs-tour__nav {
	display: inline-flex;
	align-items: center;
	gap: .4rem;
	margin-left: auto;
}

.sgs-tour button {
	font-family: inherit;
	font-size: .85em;
	font-weight: 600;
	line-height: 1.6;
	letter-spacing: normal !important;
	text-transform: none !important;
	text-shadow: none !important;
	margin: 0;
	min-width: 0 !important;
	min-height: 0 !important;
	padding: .25rem .8rem !important;
	border: 1px solid var(--sgs-line) !important;
	border-radius: 999px !important;
	box-shadow: none !important;
	background: transparent !important;
	background-image: none !important;
	color: var(--sgs-fg) !important;
	cursor: pointer;
	-webkit-appearance: none;
	appearance: none;
}

.sgs-tour__skip {
	border-color: transparent !important;
	color: var(--sgs-muted) !important;
	padding-left: .2rem !important;
	padding-right: .2rem !important;
	text-decoration: underline;
	text-underline-offset: 3px;
}

.sgs-tour__skip:hover {
	color: var(--sgs-fg) !important;
}

.sgs-tour__next {
	background: var(--sgs-accent) !important;
	border-color: var(--sgs-accent) !important;
	color: var(--sgs-accent-text) !important;
}

.sgs-tour__back[hidden] {
	display: none;
}

.sgs-tour button:focus-visible {
	outline: 2px solid var(--sgs-accent);
	outline-offset: 2px;
}

.sgs-tour__next:focus-visible {
	outline-color: var(--sgs-fg);
}

@media (max-width: 600px) {
	.sgs-tour button {
		min-height: 40px !important;
	}
}

@media (prefers-reduced-motion: reduce) {
	.sgs-tour,
	.sgs-tour__ring,
	.sgs-tour__box {
		transition: none !important;
	}
}

/* ------------------------------------------------- Theme-proofing: sizing -- */

/*
 * Every control above resets colour, padding and min-width against a hostile
 * theme, but `width` and `display` were left to cascade — and a theme with
 *
 *   button { width: 100% !important; display: block !important }
 *
 * (which is how a lot of themes get full-width buttons on mobile) turns each of
 * them into a page-wide block. That produced exactly the "two blank orange
 * boxes" shape once already, so it is pinned here for the whole family rather
 * than one control at a time: a single block, late in the file, at (0,2,0) so
 * it outranks a bare `button` selector even with !important on both sides.
 *
 * The controls that are a fixed size, or that genuinely fill their container,
 * restate their own width below rather than taking `auto`.
 */
.sgs-search .sgs-submit,
.sgs-overlay .sgs-submit,
.sgs-search .sgs-facet,
.sgs-overlay .sgs-facet,
.sgs-search .sgs-chip,
.sgs-overlay .sgs-chip,
.sgs-search .sgs-trigger,
.sgs-overlay .sgs-trigger {
	width: auto !important;
	display: inline-flex !important;
}

/*
 * The round ones are sized, not auto. `width: auto` on these leaves a 14px
 * icon inside a 26px-tall button with a 50% radius — a vertical oval where the
 * clear "×" used to be, on every site rather than only a hostile-themed one.
 */
.sgs-search .sgs-clear,
.sgs-overlay .sgs-clear {
	width: 26px !important;
	display: inline-flex !important;
}

.sgs-search .sgs-close,
.sgs-overlay .sgs-close {
	width: var(--sgs-control, 32px) !important;
	display: inline-flex !important;
}

@media (pointer: coarse) {
	.sgs-search .sgs-close,
	.sgs-overlay .sgs-close,
	.sgs-search .sgs-clear,
	.sgs-overlay .sgs-clear {
		width: 36px !important;
	}
}

.sgs-search .sgs-tips__example,
.sgs-overlay .sgs-tips__example,
.sgs-search .sgs-tips__tour,
.sgs-overlay .sgs-tips__tour,
.sgs-search .sgs-notice__action,
.sgs-overlay .sgs-notice__action,
.sgs-search .sgs-hint__try,
.sgs-overlay .sgs-hint__try,
.sgs-search .sgs-teach__try,
.sgs-overlay .sgs-teach__try,
.sgs-search .sgs-teach__more,
.sgs-overlay .sgs-teach__more,
.sgs-search .sgs-suggest-phrase,
.sgs-overlay .sgs-suggest-phrase,
.sgs-search [data-sgs-suggest],
.sgs-overlay [data-sgs-suggest] {
	width: auto !important;
	display: inline-block !important;
}

/* Fixed-size icon buttons keep their square — but not the variant that
   carries a text label beside the icon, which has to size to its words.
   Squeezing that one to 32px wraps "Search tips" onto two lines. */
.sgs-search .sgs-help:not(.sgs-help--inline),
.sgs-overlay .sgs-help:not(.sgs-help--inline) {
	width: var(--sgs-control, 32px) !important;
}

.sgs-search .sgs-help--inline,
.sgs-overlay .sgs-help--inline {
	width: auto !important;
}

.sgs-search .sgs-tips__close,
.sgs-overlay .sgs-tips__close {
	width: 28px !important;
}

.sgs-search .sgs-hint__close,
.sgs-overlay .sgs-hint__close {
	width: 20px !important;
	display: inline-flex !important;
	align-items: center;
	justify-content: center;
}

/* And the one that is meant to fill its container. */
.sgs-search .sgs-live__phrase,
.sgs-overlay .sgs-live__phrase {
	width: 100% !important;
	display: flex !important;
}

/* ---------------------------------------------- Theme-proofing: paragraphs -- */

/*
 * The component's own paragraphs — the hint, the "no results" line, the group
 * headings on the start screen, the tips footnotes — inherit whatever a theme
 * does to `p`, and plenty of themes do
 *
 *   p { font-size: 19px !important; margin: 24px 0 !important }
 *
 * which leaves a quiet 13px hint rendering larger than the results it sits
 * above, with a 24px gap knocked into the layout. Reset them all, then restate
 * the sizes that are deliberate. Same specificity as the reset, declared after
 * it, so source order settles it.
 */
.sgs-search p[class^="sgs-"],
.sgs-overlay p[class^="sgs-"] {
	font-size: inherit !important;
	line-height: 1.5 !important;
	letter-spacing: normal !important;
	text-transform: none !important;
}

/* Each restatement carries the `p` type selector too, so it matches the
   reset's (0,2,1) rather than losing to it at (0,2,0) — which is a quiet way
   to reset something and then fail to put it back. */
.sgs-search p.sgs-hint,
.sgs-overlay p.sgs-hint {
	font-size: .84em !important;
}

.sgs-search p.sgs-suggestions,
.sgs-overlay p.sgs-suggestions,
.sgs-search p.sgs-status,
.sgs-overlay p.sgs-status {
	font-size: .9em !important;
}

.sgs-search p.sgs-start__title,
.sgs-overlay p.sgs-start__title {
	font-size: .74em !important;
	line-height: 1.4 !important;
	/* These are small-caps labels by design; the reset above would strip them
	   back to cramped lowercase. */
	letter-spacing: .08em !important;
	text-transform: uppercase !important;
}

.sgs-search p.sgs-live__empty,
.sgs-overlay p.sgs-live__empty {
	font-size: .9em !important;
}

.sgs-search p.sgs-tips__note,
.sgs-overlay p.sgs-tips__note {
	font-size: .82em !important;
}

.sgs-search p.sgs-tips__extra,
.sgs-overlay p.sgs-tips__extra {
	font-size: .85em !important;
}

/* -------------------------------------------- Theme-proofing: hidden things -- */

/*
 * `hidden` is only a UA-stylesheet `display: none`, so any theme rule with
 * !important on `display` outranks it — and a theme that does
 *
 *   button { display: block !important }
 *
 * makes every one of this component's hidden buttons appear: the clear "×" on
 * an empty field, and "Load more results" as a full-width bar under a result
 * list that has no more results. Put back with enough specificity to outrank
 * both the theme and the sizing rules above, which set display themselves.
 *
 * Last in the file on purpose: nothing after it may reintroduce a display for
 * an element that is meant to be hidden.
 */
.sgs-search [hidden],
.sgs-overlay [hidden],
.sgs-search [hidden][class],
.sgs-overlay [hidden][class],
.sgs-search [hidden][class][class],
.sgs-overlay [hidden][class][class],
/* The walkthrough and the image viewer are appended to <body>, so they are
   outside the two scopes above and need naming: the tour's "Back" button is
   hidden on its first step and would otherwise show as a full-width bar. */
.sgs-tour [hidden],
.sgs-tour [hidden][class],
.sgs-tour [hidden][class][class],
.sgs-lightbox [hidden],
.sgs-lightbox [hidden][class],
.sgs-lightbox [hidden][class][class],
.sgs-overlay[hidden],
.sgs-lightbox[hidden],
.sgs-tour[hidden] {
	display: none !important;
}