html {
	box-sizing: border-box;
	height: 100%;
	background: inherit;
}

body > header {
	max-width: 60rem;
}

body {
	margin: 0;
	padding: 0;
	min-height: 100vh; /* allows growth beyond viewport */
	background: #020024;
	background: linear-gradient(
		5deg,
		rgb(17, 17, 17) 0%,
		rgb(40, 40, 40) 91%,
		rgb(50, 68, 71) 100%
	);
	background-attachment: fixed;
	background-repeat: no-repeat;
	background-size: cover;
	color: white;

	/* min-height: 100vh;  */
	/* min-height: 100dvh; */
	display: flex;
	flex-direction: column;
	/* width: 100%;  */
	/* overflow-x: visible; */

	& > header,
	& > footer {
		padding: 1rem;
	}
	& > main {
		flex: 1 0 auto;
		padding: 1rem;
	}

	& > footer {
		background-color: rgba(0, 0, 0, 0.559);
		flex-shrink: 0;
	}
}

a:link {
	color: #a3d0f8;
}
a:visited {
	color: #698ba9;
}
a:hover {
	color: #3299f3;
}
a:active {
	color: rgb(95, 235, 95) f8;
}

ul.nostyle {
	list-style: none;
	padding: 0;
}

#search-results-list {
	list-style: none;
	padding: 0;

	display: flex;
	flex-direction: column;
	gap: 0.4rem;
}
blockquote {
  border-left: solid rgb(142, 142, 170) 3px;
  margin-inline-start: 0;
  padding-inline-start: 1rem;
}

table {
  box-shadow: #00000080 4px 4px 8px;
  padding: 1rem;
  background-color: black;

	& td {
		padding: 0.3rem;
		border-bottom: solid rgba(255, 255, 255, 0.439) 1px;
	}

	& thead td {
		border-bottom-width: 4px;
	}
}

article.search-result-card {
	padding: 1rem;
	border-radius: 10px;
	background-color: #0c0b1c;
	border: solid #1f272e 1px;

	& > header {
		display: flex;
		justify-content: space-between;
		gap: 0.5rem;

		& > h3 {
			margin: 0;
		}
	}

	& > table.meta-data {
		border-collapse: collapse;
		background-color: #1f272e;
		padding: 0.4rem;

		& tr {
			border-bottom: solid #80808063 1px;
		}

		& th,
		& td {
			padding: 0.4rem;
			text-align: start;
		}
	}
}

.display-none {
	display: none;
}

/* FORMS */
form {
	background-color: #2b3639;
	position: relative;

	&[data-state="idle"] {
		border-bottom: solid 5px skyblue;
	}
	&[data-state="success"] {
		border-bottom: solid 5px green;
		& > .response-message {
			border-color: green;
		}
	}
	&[data-state="error"] {
		border-bottom: solid 5px red;
		& > .response-message {
			border-color: red;
		}
	}
	&[data-state="pending"] {
		border-bottom: dashed 5px yellow;
		& > .response-message {
			border-color: yellow;
		}
	}

	/* ? non native attributes must be in brackets */
	&[disabled] {
		border-top: dashed 4px grey;
		cursor: not-allowed;
		opacity: 0.6;
	}
}

form {
	display: grid;
	padding: 1rem;
	gap: 1rem;
	transition-duration: 500ms;
	transition-property: border-color, color;
	transition-timing-function: ease-out;
	max-width: 30rem;
	border: solid rgba(128, 128, 128, 0.253) 1px;
	box-shadow: rgba(0, 0, 0, 0.081) 3px 3px 8px;
	position: relative;

	& > legend {
		font-weight: bold;
	}

	& > label {
		display: grid;
		gap: 0.2rem;

		&:has(input[type="hidden"]) {
			display: none;
		}
	}
	& label:has(input[type="radio"]) {
		display: flex;
	}
	& > .response-message {
		border-left-width: 5px;
		border-left-style: solid;
		padding-inline: 1rem;
		transition-duration: 500ms;
		transition-property: border-color, color;
		transition-timing-function: ease-out;
	}
	& > .response-message:empty {
		display: none;
	}
}

.text-and-submit-button {
	display: flex;
	gap: 0.2rem;

	& > input {
		flex: 1;
		height: clamp(1rem, 10rem, 2rem);
	}
}

#chat-response {
	background: black;
	padding: 1rem;
	border-radius: 17px;
	border-left: solid skyblue 10px;
	position: relative;
	transition: opacity 2s;

	& > p.question {
		background-color: rgb(59, 59, 62);
		padding: 0.3rem;
	}
	/* & > ul.context {
    background-color: rgb(66, 66, 66);
  } */
}

#chat-response::before {
	content: "🤖";
	position: absolute;
	top: -24px;
	left: -18px;
	font-size: 36px;
	text-shadow: 3px 3px 13px #78b9ff;
}

#chat-response:has(.answer:empty) {
	opacity: 0;
}

/* animation */
form[data-state="pending"]::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: -6px;
	height: 6px;
	background: repeating-linear-gradient(
		135deg,
		#d4cd06 0 12px,
		#474a22 12px 24px
	);
	background-size: 200% 100%;
	animation: stripe-move 12s linear infinite;
}

@keyframes stripe-move {
	from {
		background-position: 0 0;
	}
	to {
		background-position: -200% 0;
	}
}

/* LAYOUTS */
.flex.side-by-side {
	display: flex;
	gap: 1rem;
	justify-content: space-between;
	flex-wrap: wrap;

	& > div {
		flex: 1;
		padding: 1rem;
	}

	& > div:first-child {
		border-right: solid black 1px;
	}
}

.lg-blackgrey {
  background: linear-gradient(#111 0%, black 100%)
}