scapegoat/Docs2.git

			@@ -3,20 +3,25 @@
			.search {
			min-width: fit-content;
			max-width: 14rem;
			flex-grow: 0.3;
			@media all and ($mobile) {
			flex-grow: 0.3;
			}

			& > #search-icon {
			& > .search-button {
			background-color: var(--lightgray);
			border: none;
			border-radius: 4px;
			font-family: inherit;
			font-size: inherit;
			height: 2rem;
			padding: 0;
			display: flex;
			align-items: center;
			text-align: inherit;
			cursor: pointer;
			white-space: nowrap;

			& > div {
			flex-grow: 1;
			}
			width: 100%;
			justify-content: space-between;

			& > p {
			display: inline;
			@@ -37,7 +42,7 @@
			}
			}

			& > #search-container {
			& > .search-container {
			position: fixed;
			contain: layout;
			z-index: 999;
			@@ -53,15 +58,19 @@
			display: inline-block;
			}

			& > #search-space {
			& > .search-space {
			width: 65%;
			margin-top: 12vh;
			margin-left: auto;
			margin-right: auto;

			@media all and not ($desktop) {
			width: 90%;
			}

			& > * {
			width: 100%;
			border-radius: 5px;
			border-radius: 7px;
			background: var(--light);
			box-shadow:
			0 14px 50px rgba(27, 33, 48, 0.12),
			@@ -82,79 +91,91 @@
			}
			}

			& > #search-layout {
			display: flex;
			& > .search-layout {
			display: none;
			flex-direction: row;
			visibility: hidden;
			border: 1px solid var(--lightgray);
			flex: 0 0 100%;
			box-sizing: border-box;

			& > div {
			// vh - #search-space.margin-top
			height: calc(75vh - 12vh);
			background: none;
			&.display-results {
			display: flex;
			}

			&:first-child {
			border-top-left-radius: 5px;
			border-bottom-left-radius: 5px;
			border-right: 1px solid var(--lightgray);
			}
			&[data-preview] > .results-container {
			flex: 0 0 min(30%, 450px);
			}

			&:last-child {
			border-top-right-radius: 5px;
			border-bottom-right-radius: 5px;
			@media all and not ($mobile) {
			&[data-preview] {
			& .result-card > p.preview {
			display: none;
			}

			& > div {
			&:first-child {
			border-right: 1px solid var(--lightgray);
			border-top-right-radius: unset;
			border-bottom-right-radius: unset;
			}

			&:last-child {
			border-top-left-radius: unset;
			border-bottom-left-radius: unset;
			}
			}
			}
			}

			@media all and (max-width: $tabletBreakpoint) {
			display: block;
			& > *:not(#results-container) {
			& > div {
			height: calc(75vh - 12vh);
			border-radius: 5px;
			}

			@media all and ($mobile) {
			& > #preview-container {
			display: none !important;
			}

			& > #results-container {
			&[data-preview] > #results-container {
			width: 100%;
			height: auto;
			flex: 0 0 100%;
			}
			}

			& .highlight {
			background: color-mix(in srgb, var(--tertiary) 60%, transparent);
			background: color-mix(in srgb, var(--tertiary) 60%, rgba(255, 255, 255, 0));
			border-radius: 5px;
			scroll-margin-top: 2rem;
			}

			& > #preview-container {
			& > .preview-container {
			flex-grow: 1;
			display: block;
			box-sizing: border-box;
			overflow: hidden;
			font-family: inherit;
			color: var(--dark);
			line-height: 1.5em;
			font-weight: $normalWeight;
			overflow-y: auto;
			padding: 0 2rem;

			& .preview-inner {
			margin: 0 auto;
			padding: 1em;
			height: 100%;
			width: 100%;
			box-sizing: border-box;
			overflow-y: auto;
			font-family: inherit;
			color: var(--dark);
			line-height: 1.5em;
			font-weight: 400;
			background: var(--light);
			border-top-right-radius: 5px;
			border-bottom-right-radius: 5px;
			box-shadow:
			0 14px 50px rgba(27, 33, 48, 0.12),
			0 10px 30px rgba(27, 33, 48, 0.16);
			width: min($pageWidth, 100%);
			}

			a.internal {
			background-color: none;
			a[role="anchor"] {
			background-color: transparent;
			}
			}

			& > #results-container {
			& > .results-container {
			overflow-y: auto;

			& .result-card {
			overflow: hidden;
			padding: 1em;
			cursor: pointer;
			transition: background 0.2s ease;
			@@ -170,7 +191,6 @@
			margin: 0;
			text-transform: none;
			text-align: left;
			background: var(--light);
			outline: none;
			font-weight: inherit;

			@@ -184,41 +204,23 @@
			margin: 0;
			}

			& > ul > li {
			margin: 0;
			display: inline-block;
			white-space: nowrap;
			margin: 0;
			overflow-wrap: normal;
			}

			& > ul {
			list-style: none;
			display: flex;
			padding-left: 0;
			gap: 0.4rem;
			margin: 0;
			& > ul.tags {
			margin-top: 0.45rem;
			box-sizing: border-box;
			overflow: hidden;
			background-clip: border-box;
			margin-bottom: 0;
			}

			& > ul > li > p {
			border-radius: 8px;
			background-color: var(--highlight);
			overflow: hidden;
			background-clip: border-box;
			padding: 0.03rem 0.4rem;
			margin: 0;
			padding: 0.2rem 0.4rem;
			margin: 0 0.1rem;
			line-height: 1.4rem;
			font-weight: $boldWeight;
			color: var(--secondary);
			opacity: 0.85;
			}

			& > ul > li > .match-tag {
			color: var(--tertiary);
			font-weight: bold;
			opacity: 1;
			&.match-tag {
			color: var(--tertiary);
			}
			}

			& > p {