/* Path: theme/static/pig-search.css */

/*
 * Pig Search theme
 * Structure: Google-inspired search hierarchy
 * Palette: Midnight Vencord flavor by refact0r
 * https://github.com/refact0r/midnight-discord/blob/master/themes/flavors/midnight-vencord.theme.css
 */

:root,
:root.theme-auto,
:root.theme-light,
:root.theme-dark,
:root.theme-black {
	color-scheme: dark;

	--pig-text-bright: hsl(38deg 47% 90%);
	--pig-text-heading: hsl(38deg 47% 80%);
	--pig-text: #d4be98;
	--pig-result-text: #c9c1b6;
	--pig-text-muted: #b7a88d;
	--pig-text-faint: #938773;
	--pig-bg-main: #282828;
	--pig-bg-raised: #32302f;
	--pig-bg-control: #3c3836;
	--pig-bg-pressed: hsl(20deg 5% 25%);
	--pig-border: #504945;
	--pig-border-soft: rgb(212 190 152 / 16%);
	--pig-red: #ea6962;
	--pig-green: #a8b665;
	--pig-blue: #7caea3;
	--pig-yellow: #d8a656;
	--pig-purple: #d3869b;
	--pig-purple-hover: hsl(344deg 47% 78%);
	--pig-focus: #e8b4c2;
	--pig-content-width: 48rem;
	--pig-sidebar-width: 24.5rem;
	--pig-image-card-min: 13rem;
	--pig-header-offset: 11rem;
	--pig-result-padding-block: 0.5rem;

	--color-base-font: var(--pig-text);
	--color-base-font-rgb: 212, 190, 152;
	--color-base-background: var(--pig-bg-main);
	--color-base-background-mobile: var(--pig-bg-main);
	--color-url-font: var(--pig-purple);
	--color-url-visited-font: var(--pig-blue);
	--color-header-background: var(--pig-bg-main);
	--color-header-border: var(--pig-border-soft);
	--color-footer-background: var(--pig-bg-main);
	--color-footer-border: var(--pig-border-soft);
	--color-sidebar-border: var(--pig-border);
	--color-sidebar-font: var(--pig-text);
	--color-sidebar-background: var(--pig-bg-raised);
	--color-backtotop-font: var(--pig-text-heading);
	--color-backtotop-border: var(--pig-border);
	--color-backtotop-background: var(--pig-bg-control);
	--color-btn-background: var(--pig-purple);
	--color-btn-font: var(--pig-bg-main);
	--color-show-btn-background: var(--pig-bg-control);
	--color-show-btn-font: var(--pig-text-bright);
	--color-search-border: var(--pig-border);
	--color-search-shadow: 0 2px 7px rgb(0 0 0 / 32%);
	--color-search-background: var(--pig-bg-control);
	--color-search-font: var(--pig-text-bright);
	--color-search-background-hover: var(--pig-purple);
	--color-error: var(--pig-red);
	--color-error-background: rgb(234 105 98 / 14%);
	--color-warning: var(--pig-yellow);
	--color-warning-background: rgb(216 166 86 / 14%);
	--color-success: var(--pig-green);
	--color-success-background: rgb(168 182 101 / 14%);
	--color-categories-item-selected-font: var(--pig-purple);
	--color-categories-item-border-selected: var(--pig-purple);
	--color-autocomplete-font: var(--pig-text-bright);
	--color-autocomplete-border: var(--pig-border);
	--color-autocomplete-shadow: 0 4px 14px rgb(0 0 0 / 38%);
	--color-autocomplete-background: var(--pig-bg-control);
	--color-autocomplete-background-hover: var(--pig-bg-pressed);
	--color-answer-font: var(--pig-text);
	--color-answer-background: var(--pig-bg-raised);
	--color-result-keyvalue-col-table: var(--pig-bg-raised);
	--color-result-keyvalue-odd: var(--pig-bg-raised);
	--color-result-keyvalue-even: var(--pig-bg-main);
	--color-result-background: var(--pig-bg-main);
	--color-result-border: var(--pig-border-soft);
	--color-result-url-font: var(--pig-text-heading);
	--color-result-vim-selected: rgb(211 134 155 / 10%);
	--color-result-vim-arrow: var(--pig-purple);
	--color-result-description-highlight-font: var(--pig-text-bright);
	--color-result-link-font: var(--pig-purple);
	--color-result-link-font-highlight: var(--pig-purple-hover);
	--color-result-link-visited-font: var(--pig-blue);
	--color-result-publishdate-font: var(--pig-text-muted);
	--color-result-engines-font: var(--pig-text-faint);
	--color-result-search-url-border: var(--pig-border);
	--color-result-search-url-font: var(--pig-text-heading);
	--color-result-image-span-font: var(--pig-text);
	--color-result-image-span-font-selected: var(--pig-bg-main);
	--color-result-image-background: var(--pig-bg-main);
	--color-result-detail-font: var(--pig-text-bright);
	--color-result-detail-label-font: var(--pig-text-muted);
	--color-result-detail-background: var(--pig-bg-main);
	--color-result-detail-hr: var(--pig-border);
	--color-result-detail-link: var(--pig-purple);
	--color-settings-tr-hover: var(--pig-bg-raised);
	--color-settings-engine-description-font: var(--pig-text-muted);
	--color-settings-table-group-background: rgb(255 255 255 / 3%);
	--color-toolkit-badge-font: var(--pig-text-bright);
	--color-toolkit-badge-background: var(--pig-bg-control);
	--color-toolkit-dialog-border: var(--pig-border);
	--color-toolkit-dialog-background: var(--pig-bg-raised);
	--color-toolkit-tabs-label-border: var(--pig-bg-main);
	--color-toolkit-tabs-section-border: var(--pig-border);
	--color-toolkit-select-background: var(--pig-bg-control);
	--color-toolkit-select-border: var(--pig-border);
	--color-toolkit-select-background-hover: var(--pig-bg-pressed);
	--color-toolkit-input-text-font: var(--pig-text-bright);
	--color-toolkit-checkbox-onoff-off-background: var(--pig-bg-control);
	--color-toolkit-checkbox-onoff-on-background: var(--pig-bg-control);
	--color-toolkit-checkbox-onoff-on-mark-background: var(--pig-purple);
	--color-toolkit-checkbox-onoff-on-mark-color: var(--pig-bg-main);
	--color-toolkit-checkbox-onoff-off-mark-background: var(--pig-text-muted);
	--color-toolkit-checkbox-label-background: var(--pig-bg-main);
	--color-toolkit-checkbox-label-border: var(--pig-border);
	--color-toolkit-checkbox-input-border: var(--pig-purple);
	--color-toolkit-engine-tooltip-border: var(--pig-border);
	--color-toolkit-engine-tooltip-background: var(--pig-bg-raised);
	--color-doc-code: var(--pig-text-heading);
	--color-doc-code-background: var(--pig-bg-control);
	--color-favicon-background-color: var(--pig-bg-control);
	--color-favicon-border-color: var(--pig-border);
}

* {
	box-sizing: border-box;
}

html {
	background: var(--pig-bg-main);
	color: var(--pig-text);
	font-family: Arial, Helvetica, sans-serif;
	font-size: 16px;
}

body {
	background: var(--pig-bg-main);
	min-width: 20rem;
}

::selection {
	background: rgb(211 134 155 / 32%);
	color: var(--pig-text-bright);
}

a {
	text-underline-offset: 0.16em;
}

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
summary:focus-visible {
	outline: 2px solid var(--pig-focus);
	outline-offset: 3px;
}

.pig-wordmark {
	display: inline-flex;
	align-items: baseline;
	color: var(--pig-text-bright);
	font-family: Arial, Helvetica, sans-serif;
	font-weight: 700;
	letter-spacing: -0.055em;
	line-height: 1;
	white-space: nowrap;
}

.pig-wordmark__gap {
	width: 0.25em;
}

.pig-wordmark__letter--red {
	color: var(--pig-red);
}

.pig-wordmark__letter--green {
	color: var(--pig-green);
}

.pig-wordmark__letter--blue {
	color: var(--pig-blue);
}

.pig-wordmark__letter--yellow {
	color: var(--pig-yellow);
}

.pig-wordmark__letter--purple {
	color: var(--pig-purple);
}

#main_index .index .pig-wordmark--home {
	font-size: clamp(3.6rem, 6vw, 4.5rem);
}

.pig-wordmark--compact {
	font-size: 1.35rem;
}

#links_on_top {
	inset-block-start: 1.35rem;
	inset-inline-end: 1.5rem;
	gap: 1.25rem;
	z-index: 20;
}

#links_on_top a {
	gap: 0.35rem;
	margin: 0;
	color: var(--pig-text-muted);
	font-size: 0.875rem;
}

#links_on_top a:hover,
#links_on_top a:hover * {
	color: var(--pig-text-bright);
}

.search_box {
	position: relative;
	width: 100%;
	min-height: 3rem;
	overflow: visible;
	background: var(--pig-bg-control);
	border: 1px solid var(--pig-border);
	border-radius: 1.5rem;
	box-shadow: none;
	transition:
		border-color 150ms ease-out,
		box-shadow 150ms ease-out,
		background-color 150ms ease-out;
}

.search_box:hover,
.search_box:focus-within {
	background: var(--pig-bg-control);
	border-color: transparent;
	box-shadow: 0 2px 8px rgb(0 0 0 / 42%);
}

#q,
#clear_search,
#send_search {
	min-height: 2.875rem;
	background: transparent;
}

#q {
	padding-inline: 1.15rem 0.35rem;
	border-radius: 1.5rem 0 0 1.5rem;
	color: var(--pig-text-bright);
	caret-color: var(--pig-purple);
	font-size: 1rem;
}

#q::placeholder {
	color: var(--pig-text-muted);
	opacity: 1;
}

#clear_search,
#send_search {
	color: var(--pig-text-muted);
}

#clear_search:hover,
#send_search:hover {
	background: transparent;
	color: var(--pig-purple-hover);
}

#send_search {
	padding-inline: 0.85rem 1rem;
	border-radius: 0 1.5rem 1.5rem 0;
}

.autocomplete.open {
	inset: calc(100% - 1px) -1px auto;
	width: auto;
	max-width: none;
	margin: 0;
	padding-block: 0.4rem;
	background: var(--pig-bg-control);
	border: 1px solid var(--pig-border);
	border-top: 0;
	border-radius: 0 0 1.15rem 1.15rem;
	box-shadow: 0 8px 18px rgb(0 0 0 / 42%);
	z-index: 30;
}

.autocomplete.open:not(:has(li)) {
	display: none;
}

.search_box:has(.autocomplete.open li) {
	border-radius: 1.5rem 1.5rem 0 0;
}

.autocomplete > ul > li {
	padding: 0.68rem 1.15rem;
}

.autocomplete > ul > li:hover,
.autocomplete > ul > li.active {
	background: var(--pig-bg-pressed);
}

#main_index {
	margin: 0;
}

#main_index .index {
	display: flex;
	min-height: 100vh;
	min-height: 100svh;
	flex-direction: column;
	align-items: center;
	padding: clamp(8rem, 24vh, 14rem) 1.25rem 4rem;
	text-align: center;
}

#main_index .index .title {
	min-height: auto;
	margin: 0 0 2rem;
	background: none;
}

#main_index .index h1 {
	visibility: visible;
	margin: 0;
}

#main_index .index #search,
#main_index .index #search_header,
#main_index .index #search_view {
	width: 100%;
	max-width: 36.5rem;
}

#main_index .index #search_view {
	position: relative;
	padding: 0;
}

#main_index .index .search_box {
	max-width: none;
}

#main_index .index .search_filters {
	justify-content: center;
	margin: 1rem 0 0;
}

#main_results #search_header {
	display: grid;
	min-height: 7.6rem;
	grid-template-columns: 7.75rem minmax(20rem, 44rem);
	grid-template-areas:
		"logo search"
		"spacer navigation";
	gap: 0.8rem 1rem;
	align-items: center;
	padding: 1.15rem 11rem 0 1.5rem;
	background: var(--pig-bg-main);
	border-bottom: 1px solid var(--pig-border-soft);
}

#main_results #search_logo {
	align-self: center;
	justify-content: flex-start;
	padding: 0;
}

#main_results #search_view {
	width: 100%;
	padding: 0;
}

#main_results .search_box {
	max-width: 46rem;
}

#main_results .pig-search-navigation {
	position: relative;
	grid-area: navigation;
	display: flex;
	min-width: 0;
	align-items: flex-end;
}

#main_results #categories {
	min-width: 0;
	flex: 1 1 auto;
	align-self: end;
	overflow-x: auto;
	scrollbar-width: none;
}

#main_results #categories::-webkit-scrollbar {
	display: none;
}

#categories_container {
	display: flex;
	width: max-content;
	gap: 1.45rem;
}

#categories_container .category_button,
#categories_container .category_checkbox label {
	gap: 0.35rem;
	margin: 0;
	padding: 0.45rem 0 0.7rem;
	border-bottom-width: 3px;
	color: var(--pig-text-muted);
	font-size: 0.875rem;
	font-weight: 500;
}

#categories_container .category_button:hover,
#categories_container .category_checkbox label:hover {
	color: var(--pig-text-bright);
}

#categories_container .category_button.selected,
#categories_container .category_checkbox input:checked + label {
	color: var(--pig-purple);
	border-color: var(--pig-purple);
}

.pig-search-tools {
	position: relative;
	width: fit-content;
	flex: 0 0 auto;
	margin: 0 0 0.35rem 0.8rem;
}

.pig-search-tools summary {
	width: fit-content;
	min-height: 2rem;
	padding: 0.4rem 0.8rem;
	color: var(--pig-text-muted);
	border-radius: 1rem;
	cursor: pointer;
	font-size: 0.875rem;
	list-style: none;
}

.pig-search-tools summary::-webkit-details-marker {
	display: none;
}

.pig-search-tools summary:hover,
.pig-search-tools summary:focus-visible,
.pig-search-tools[open] summary {
	color: var(--pig-text-bright);
	background: var(--pig-bg-control);
}

.search_filters {
	position: absolute;
	inset: calc(100% + 0.55rem) 0 auto auto;
	z-index: 40;
	width: max-content;
	max-width: calc(100vw - 2rem);
	gap: 0.35rem;
	margin: 0;
	padding: 0.65rem;
	background: var(--pig-bg-control);
	border: 1px solid var(--pig-border);
	border-radius: 0.8rem;
	box-shadow: 0 10px 28px rgb(0 0 0 / 42%);
}

.search_filters select,
.search_filters button,
.search_filters input {
	min-height: 2.5rem;
	color: var(--pig-text-muted);
	font-size: 0.8125rem;
}

.search_filters select {
	width: auto;
	padding-inline: 0.75rem 2.25rem;
	background-color: var(--pig-bg-control);
	border: 1px solid var(--pig-border);
	border-radius: 0.6rem;
}

.search_filters #language {
	width: 19rem;
}

.search_filters #time_range {
	width: 8rem;
}

.search_filters #safesearch {
	width: 10.5rem;
}

.search_filters select:hover {
	color: var(--pig-text-bright);
	background-color: var(--pig-bg-pressed);
	border-color: var(--pig-text-faint);
}

#main_results #results {
	max-width: 82rem;
	grid-template:
		"corrections sidebar" min-content
		"answers sidebar" min-content
		"urls sidebar" 1fr
		"pagination sidebar" min-content
		/ minmax(0, var(--pig-content-width)) minmax(19.5rem, var(--pig-sidebar-width));
	gap: 0 4.25rem;
	margin: 2rem 2rem 0 var(--pig-header-offset);
}

#urls {
	min-width: 0;
}

.result {
	position: relative;
	margin: 0;
	padding-block: var(--pig-result-padding-block);
	background: transparent;
	border: 0;
}

.result .url_header {
	width: fit-content;
	max-width: 100%;
	gap: 0.7rem;
	align-items: center;
}

.result .favicon {
	display: grid;
	width: 1.75rem;
	height: 1.75rem;
	flex: 0 0 1.75rem;
	place-items: center;
	background: var(--pig-bg-control);
	border-radius: 50%;
}

.result .favicon img {
	width: 1rem;
	height: 1rem;
	padding: 0;
	background: transparent;
	border: 0;
	border-radius: 0.15rem;
}

.result .url_wrapper {
	color: var(--pig-text-bright);
	font-size: 0.875rem;
	line-height: 1.3;
}

.result .url_o2 {
	color: var(--pig-text-muted);
}

.result h3 {
	margin: 0.5rem 0 0.4rem;
	font-size: 1.375rem;
	font-weight: 400;
	line-height: 1.25;
}

.result h3 a {
	color: var(--pig-purple);
	font-size: inherit;
}

.result h3 a:hover,
.result h3 a:focus {
	color: var(--pig-purple-hover);
	text-decoration-thickness: 1px;
}

.result h3 a:visited {
	color: var(--pig-blue);
}

.result .content,
.result .stat {
	max-width: 72ch;
	color: var(--pig-result-text);
	font-size: 1rem;
	line-height: 1.5;
}

.result .published_date,
.result .result_length,
.result .result_views,
.result .result_author,
.result .result_shipping,
.result .result_source_country {
	color: var(--pig-text-muted);
	font-size: 0.8rem;
}

.result .engines {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 0.25rem;
	margin-top: 0.55rem;
	color: var(--pig-text-muted);
	font-size: 0.6875rem;
	line-height: 1.4;
}

.result .engines::before {
	content: "Source:";
}

.result .engines span {
	margin: 0;
	padding: 0;
	color: inherit;
	background: none;
	border: 0;
	border-radius: 0;
	font: inherit;
	text-transform: capitalize;
}

.result .engines .cache_link,
.result .engines svg {
	display: none;
}

article[data-vim-selected] {
	margin-inline: -0.75rem;
	padding-inline: 0.75rem;
	background: var(--color-result-vim-selected);
	border: 0;
	border-radius: 0.65rem;
}

#answers {
	margin: 0 0 1.75rem;
	padding: 1.15rem 1.25rem;
	background: var(--pig-bg-raised);
	border: 1px solid var(--pig-border-soft);
	border-radius: 0.8rem;
	color: var(--pig-text-heading);
}

#sidebar {
	color: var(--pig-text);
}

#sidebar .infobox {
	margin: 0 0 1.25rem;
	padding: 0;
	overflow: hidden;
	background: var(--pig-bg-raised);
	border: 1px solid var(--pig-border);
	border-radius: 0.8rem;
}

.pig-knowledge-panel__image {
	display: block;
	width: 100%;
	max-height: 13rem;
	aspect-ratio: 16 / 9;
	object-fit: cover;
	background: var(--pig-bg-control);
}

.pig-knowledge-panel__body {
	padding: 1.15rem;
}

.pig-knowledge-panel .title {
	margin: 0 0 0.7rem;
	color: var(--pig-text-bright);
	font-size: 1.45rem;
	font-weight: 500;
	line-height: 1.25;
}

.pig-knowledge-panel__summary {
	margin: 0;
	color: var(--pig-result-text);
	font-size: 0.925rem;
	line-height: 1.55;
}

.pig-knowledge-panel__summary a,
.pig-knowledge-panel__sources a {
	color: var(--pig-purple);
}

.pig-knowledge-panel__sources a {
	display: inline-flex;
	align-items: center;
	min-height: 2.1rem;
	padding: 0.38rem 0.72rem;
	background: var(--pig-bg-control);
	border: 1px solid var(--pig-border);
	border-radius: 1.1rem;
	font-weight: 600;
	line-height: 1.2;
	text-decoration: none;
}

.pig-knowledge-panel__sources a:hover,
.pig-knowledge-panel__sources a:focus-visible {
	color: var(--pig-text-bright);
	background: var(--pig-bg-pressed);
	border-color: var(--pig-purple);
}

.pig-knowledge-panel__facts {
	margin: 1rem 0 0;
	padding-top: 0.25rem;
	border-top: 1px solid var(--pig-border-soft);
}

.pig-knowledge-panel__fact {
	display: grid;
	grid-template-columns: minmax(5.5rem, 0.42fr) minmax(0, 0.58fr);
	gap: 0.75rem;
	padding: 0.62rem 0;
	border-bottom: 1px solid var(--pig-border-soft);
	font-size: 0.825rem;
	line-height: 1.4;
}

.pig-knowledge-panel__fact dt,
.pig-knowledge-panel__fact dd {
	margin: 0;
}

.pig-knowledge-panel__fact dt {
	color: var(--pig-text-heading);
	font-weight: 600;
}

.pig-knowledge-panel__fact dd {
	min-width: 0;
	overflow-wrap: anywhere;
	color: var(--pig-result-text);
}

.pig-knowledge-panel__fact img {
	width: 3rem;
	height: 3rem;
	object-fit: cover;
	border-radius: 0.35rem;
}

.pig-knowledge-panel__sources ul {
	display: flex;
	flex-wrap: wrap;
	gap: 0.45rem 0.8rem;
	margin: 1rem 0 0;
	padding: 0;
	list-style: none;
}

.pig-knowledge-panel__sources li {
	margin: 0;
	font-size: 0.825rem;
}

.pig-knowledge-panel__related {
	margin-top: 1rem;
	padding-top: 1rem;
	border-top: 1px solid var(--pig-border-soft);
}

.pig-knowledge-panel__related h3 {
	margin: 0 0 0.65rem;
	color: var(--pig-text-heading);
	font-size: 0.875rem;
}

.pig-knowledge-panel__related-list {
	display: flex;
	flex-wrap: wrap;
	gap: 0.45rem;
}

.pig-knowledge-panel__related form {
	margin: 0;
}

#sidebar .pig-knowledge-panel__related button {
	min-height: 2.1rem;
	padding: 0.4rem 0.75rem;
	color: var(--pig-purple);
	background: var(--pig-bg-control);
	border: 1px solid var(--pig-border);
	border-radius: 1.1rem;
	font-size: 0.8rem;
	font-weight: 600;
	line-height: 1.2;
	cursor: pointer;
}

#sidebar .pig-knowledge-panel__related button:hover {
	color: var(--pig-text-bright);
	background: var(--pig-bg-pressed);
	border-color: var(--pig-purple);
}

#suggestions {
	margin: 0 0 1.25rem;
	overflow: hidden;
	background: var(--pig-bg-raised);
	border: 1px solid var(--pig-border);
	border-radius: 0.8rem;
}

#suggestions .sidebar-collapsible {
	padding: 0;
	border: 0;
}

#suggestions .title {
	margin: 0;
	padding: 0.95rem 1.1rem;
	color: var(--pig-text-heading);
	font-size: 0.95rem;
	font-weight: 600;
}

#suggestions details[open] > .title {
	border-bottom: 1px solid var(--pig-border-soft);
}

#suggestions .wrapper {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	margin: 0;
	padding: 1rem;
	color: var(--pig-text-muted);
	list-style: none;
}

#suggestions .wrapper li,
#suggestions .wrapper form {
	display: block;
	max-width: 100%;
	margin: 0;
}

#suggestions input.suggestion[type="submit"] {
	width: auto;
	max-width: 100%;
	min-height: 2.1rem;
	margin: 0;
	padding: 0.4rem 0.75rem;
	overflow: hidden;
	color: var(--pig-purple);
	background: var(--pig-bg-control);
	border: 1px solid var(--pig-border);
	border-radius: 1.1rem;
	font-size: 0.8rem;
	font-weight: 600;
	line-height: 1.2;
	text-overflow: ellipsis;
	white-space: nowrap;
}

#suggestions input.suggestion[type="submit"]:hover,
#suggestions input.suggestion[type="submit"]:focus-visible {
	color: var(--pig-text-bright);
	background: var(--pig-bg-pressed);
	border-color: var(--pig-purple);
	text-decoration: none;
}

#engines_msg,
#apis,
#search_url {
	color: var(--pig-text-muted);
}

#engines_msg,
#apis,
#search_url {
	display: none;
}

.sidebar-collapsible {
	border-color: var(--pig-border-soft);
}

input,
select,
textarea,
button {
	font: inherit;
}

select,
input[type="text"],
input[type="search"],
textarea {
	color: var(--pig-text-bright);
	background-color: var(--pig-bg-control);
	border-color: var(--pig-border);
}

input[type="submit"],
#results button[type="submit"],
.button {
	background: var(--pig-purple);
	color: var(--pig-bg-main);
	border-radius: 1.25rem;
	font-weight: 600;
}

input[type="submit"]:hover,
#results button[type="submit"]:hover,
.button:hover {
	background: var(--pig-purple-hover);
}

#pagination {
	margin: 1rem 0 2rem;
}

.pig-fallback-notice {
	margin: 0 0 1.5rem;
	padding: 0.7rem 0.9rem;
	color: var(--pig-text-muted);
	background: var(--pig-bg-raised);
	border: 1px solid var(--pig-border-soft);
	border-radius: 0.35rem;
	font-size: 0.875rem;
	line-height: 1.45;
}

#pagination button,
#pagination input {
	min-width: 2.25rem;
	min-height: 2.25rem;
}

#backToTop {
	background: var(--pig-bg-control);
	border-color: var(--pig-border);
	border-radius: 50%;
}

.result-images,
.result-videos,
.result-map {
	color: var(--pig-text);
}

#main_results #results.only_template_images {
	width: auto;
	max-width: none;
	grid-template:
		"corrections" min-content
		"answers" min-content
		"urls" 1fr
		"pagination" min-content
		/ minmax(0, 1fr);
	gap: 0;
	margin: 1.25rem 1.25rem 0;
}

#main_results #results.only_template_images #urls {
	display: grid !important;
	grid-template-columns: repeat(auto-fill, minmax(var(--pig-image-card-min), 1fr));
	gap: 1.15rem 0.9rem;
	align-items: stretch;
}

#main_results #results.only_template_images #urls::after {
	display: none;
}

#main_results #results.only_template_images .result-images {
	width: auto;
	height: auto;
	min-width: 0;
	margin: 0;
	padding: 0;
	overflow: hidden;
	background: var(--pig-bg-raised);
	border: 1px solid var(--pig-border-soft) !important;
	border-radius: 0.7rem;
}

#main_results #results.only_template_images .result-images > a {
	display: grid;
	grid-template-rows: auto 1fr auto;
	height: 100%;
	min-width: 0;
	color: inherit;
	text-decoration: none;
}

#main_results #results.only_template_images .result-images .image_thumbnail {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	background: var(--pig-bg-control);
	border-radius: 0;
	transition: filter 140ms ease-out;
}

#main_results #results.only_template_images .result-images > a:hover .image_thumbnail,
#main_results #results.only_template_images .result-images > a:focus-visible .image_thumbnail {
	filter: brightness(1.08);
}

#main_results #results.only_template_images .result-images span.title,
#main_results #results.only_template_images .result-images span.source {
	position: static;
	width: auto;
	min-width: 0;
	margin: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

#main_results #results.only_template_images .result-images span.title {
	padding: 0.65rem 0.75rem 0;
	color: var(--pig-text-heading);
	font-size: 0.875rem;
	font-weight: 600;
	line-height: 1.3;
}

#main_results #results.only_template_images .result-images span.source {
	padding: 0.22rem 0.75rem 0.7rem;
	color: var(--pig-text-muted);
	font-size: 0.72rem;
	line-height: 1.25;
}

#main_results #results.only_template_images .result-images .image_resolution {
	position: absolute;
	inset: 0.5rem 0.5rem auto auto;
	padding: 0.28rem 0.42rem;
	color: var(--pig-text-bright);
	background: rgb(40 40 40 / 86%);
	border-radius: 0.35rem;
	font-size: 0.7rem;
	line-height: 1;
}

#main_results #results.only_template_images article.result-images[data-vim-selected] {
	background: var(--pig-bg-raised);
	border-color: var(--pig-purple) !important;
}

#main_results #results.only_template_images article.result-images[data-vim-selected] span.title,
#main_results #results.only_template_images article.result-images[data-vim-selected] span.source {
	color: inherit;
}

.result-images img,
.result-videos img,
.result .thumbnail {
	border-radius: 0.5rem;
}

.dialog-error {
	color: var(--pig-red);
	background: var(--color-error-background);
	border-color: var(--pig-red);
}

@media (min-width: 50.01em) and (max-width: 74.999em) {
	#main_results #search_header {
		padding-inline-end: 4.5rem;
	}

	.center-alignment-no #main_results div#results {
		width: auto;
		max-width: var(--pig-content-width);
		grid-template:
			"corrections" min-content
			"answers" min-content
			"sidebar" min-content
			"urls" 1fr
			"pagination" min-content
			/ minmax(0, 1fr);
		gap: 0;
		justify-content: start;
		margin-inline-start: clamp(1rem, 3vw, 2.5rem);
		margin-inline-end: 1rem;
	}

	#sidebar {
		margin: 0 0 1.5rem;
	}
}

@media (min-width: 75em) and (max-width: 84.375em) {
	#main_results #search_header {
		padding-inline-end: 4.5rem;
	}

	.center-alignment-no #main_results div#results {
		width: auto;
		max-width: 82rem;
		grid-template:
			"corrections sidebar" min-content
			"answers sidebar" min-content
			"urls sidebar" 1fr
			"pagination sidebar" min-content
			/ minmax(0, var(--pig-content-width)) minmax(19.5rem, var(--pig-sidebar-width));
		gap: 0 4.25rem;
		justify-content: start;
		margin: 2rem 1rem 0 clamp(1rem, 3vw, 2.5rem);
	}
}

@media (max-width: 50rem) {
	#links_on_top {
		inset-block-start: 0.8rem;
		inset-inline-end: 0.8rem;
	}

	#links_on_top .link_on_top_about,
	#links_on_top .link_on_top_donate,
	#links_on_top span {
		display: none;
	}

	#main_results #search_header {
		min-height: auto;
		grid-template-columns: 4.25rem minmax(0, 1fr);
		grid-template-areas:
			"logo search"
			"navigation navigation";
		gap: 0.75rem 0.5rem;
		padding: 0.7rem 3.4rem 0;
	}

	#main_results .pig-wordmark--compact {
		font-size: 0;
	}

	#main_results .pig-wordmark--compact .pig-wordmark__letter:first-child,
	#main_results .pig-wordmark--compact .pig-wordmark__letter:nth-child(5) {
		display: inline;
		font-size: 1.45rem;
	}

	#main_results .pig-wordmark--compact .pig-wordmark__gap,
	#main_results .pig-wordmark--compact .pig-wordmark__letter:not(:first-child):not(:nth-child(5)) {
		display: none;
	}

	#main_results #categories {
		width: 100%;
	}

	#categories_container {
		gap: 1.2rem;
		padding-inline: 0.8rem;
	}

	#categories_container .category_button svg,
	#categories_container .category_checkbox svg {
		display: none;
	}

	.search_filters {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		inset: calc(100% + 0.35rem) 0 auto;
		width: auto;
		max-width: none;
		margin: 0;
		gap: 0.5rem;
		padding: 0.7rem;
	}

	.pig-search-tools {
		position: static;
		width: fit-content;
		margin: 0 0.25rem 0.35rem 0.5rem;
		padding: 0;
	}

	.pig-search-tools summary {
		margin: 0;
	}

	.search_filters select {
		width: 100% !important;
		min-width: 0;
	}

	.search_filters #language {
		grid-column: 1 / -1;
	}

	.center-alignment-no #main_results div#results {
		width: auto;
		max-width: none;
		margin: 1.25rem 1rem 0;
		grid-template-columns: minmax(0, 1fr);
	}

	#main_results #results.only_template_images {
		margin: 1rem 0.75rem 0;
	}

	#main_results #results.only_template_images #urls {
		grid-template-columns: repeat(auto-fill, minmax(10rem, 1fr));
		gap: 0.75rem;
	}

	.result .content,
	.result .stat {
		font-size: 0.9rem;
	}

	.result h3 {
		font-size: 1.25rem;
	}

	#main_index .index {
		min-height: calc(100vh - 5rem);
		justify-content: flex-start;
		padding-top: clamp(7rem, 22vh, 10rem);
	}

	#main_index .index .title {
		margin-bottom: 1.6rem;
	}

	#main_index .index .pig-wordmark--home {
		font-size: clamp(3rem, 14vw, 4.4rem);
	}
}

@media (max-width: 30rem) {
	#main_results #search_header {
		grid-template-columns: 1fr;
		grid-template-areas:
			"search"
			"navigation";
		padding-inline: 0.65rem 3.15rem;
	}

	#main_results #search_logo {
		display: none;
	}

	.center-alignment-no #main_results div#results {
		margin-inline: 0.75rem;
	}
}

@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		scroll-behavior: auto !important;
		transition-duration: 0.01ms !important;
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
	}
}