@font-face {
	font-family: 'Komplekt 080';
	src: url('/site/ingredients/type/Komplekt080-Regular.woff2') format('woff2');
	font-display: block;
	font-weight: normal;
	font-style: normal;
}

@font-face {
	font-family: 'Komplekt 080';
	src: url('/site/ingredients/type/Komplekt080-SemiBold.woff2') format('woff2');
	font-display: block;
	font-weight: bold;
	font-style: normal;
}

@font-face {
	font-family: 'Komplekt 080';
	src: url('/site/ingredients/type/Komplekt080-Italic.woff2') format('woff2');
	font-display: block;
	font-weight: normal;
	font-style: italic;
}

@font-face {
	font-family: 'Komplekt 080';
	src: url('/site/ingredients/type/Komplekt080-SemiBoldItalic.woff2') format('woff2');
	font-display: block;
	font-weight: bold;
	font-style: italic;
}

@font-face {
	font-family: 'Komplekt 070';
	src: url('/site/ingredients/type/Komplekt070-SemiBold.woff2') format('woff2');
	font-display: block;
	font-weight: bold;
	font-style: normal;
}

@font-face {
	font-family: 'Komplekt 070';
	src: url('/site/ingredients/type/Komplekt070-SemiBoldItalic.woff2') format('woff2');
	font-display: block;
	font-weight: bold;
	font-style: italic;
}

@font-face {
	font-family: 'Berkeley Mono';
	src: url('/site/ingredients/type/BerkeleyMono-Regular.woff2') format('woff2');
	font-display: block;
}

:root {
	color-scheme: light dark;
	
	--background-light: #dfdfdf;
	--primary-light: #2e2e2e;
	--secondary-light: #717171;
	
	--background-dark: #2e2e2e;
	--primary-dark: #dfdfdf;
	--secondary-dark: #878787;
	
	--link-light: #3a607f;
	--link-visited-light: #6b3a7f;
	--link-dark: #9bb2c5;
	--link-visited-dark: #b69bc1;
	
	--notice-light: #c1c1c1;
	--notice-dark: #434343;
	
	--border-radius: .3em;
	
	::selection {
		background: light-dark(#000, #fff);
		color: light-dark(#fff, #000);
	}
	
	:focus-visible {
		outline: 3px solid #E8AE15;
		border-radius: var(--border-radius);
		outline-offset: -3px;
	}
}

* {
	box-sizing: border-box;
	margin: 0;
	padding: 0;
	text-rendering: optimizeLegibility;
}





html, body {
	width: 100%;
	max-width: 100vw;
	overflow-x: hidden;
}

main {
	/*overflow-x: auto;*/
}





html {
	scrollbar-gutter: stable;
	overflow-y: scroll;
}

body {
	font-family: 'Komplekt 080', sans-serif;
	font-feature-settings: "ss03" on;
	font-size: 1.4em;
	background: light-dark(var(--background-light), var(--background-dark));
	color: light-dark(var(--primary-light), var(--primary-dark));
	display: grid;
	grid-template-columns: auto minmax(0, 150ch);
	grid-template-areas: "header main" "footer footer";
	justify-content: center;
	column-gap: 6rem;
	row-gap: 2rem;
	padding: 5rem;
}



body {
	display: grid;
	grid-template-columns: auto minmax(0, 100%);
}





#logotype {
	margin-top: -.2em;
}

.new {
	font-size: 71%;
	text-transform: uppercase;

	background: light-dark(var(--notice-light), var(--notice-dark));
	padding: .3em .4em .15em .4em;
	border-radius: var(--border-radius);
}

.smcp {
	font-size: 80%;
	text-transform: uppercase;
	letter-spacing: 0.05ch;
}

summary:hover {
	cursor: pointer;
}

details:last-of-type summary {
	list-style: none;
	&::before {
		font-weight: bold;
		content: "→";
		width: 1.2ch;
		display: inline-block;
		padding-right: .3rem;
	}
	[open] &::before {
		font-weight: bold;
		content: "↓";
		width: 1.2ch;
		display: inline-block;
	}
}
details:last-of-type summary::-webkit-details-marker {
	display: none;
}

svg {
	fill: light-dark(var(--primary-light), var(--primary-dark));
}

a svg {
	padding-right: .2em;
	fill: currentcolor;
}

footer svg {
	fill: light-dark(var(--secondary-light), var(--secondary-dark));
	height: 1.7em !important;
}

body * + * {
	margin-block-start: 1.2em;
}

li, body, header, main, nav {
	margin-block-start: unset;
}

.icon {
	height: 1em;
	width: auto;
	vertical-align: middle;
	margin: -.25em .25em 0 0;
	display: inline-block;
}

a:link, a:visited, a:hover, a:active {
	color: light-dark(var(--link-light), var(--link-dark));
	text-decoration-color: inherit;
	text-decoration-thickness: .1ch;
	text-underline-offset: 1.5px;
}

a:visited {
	color: light-dark(var(--link-visited-light), var(--link-visited-dark));
}

header a:link, header a:visited, header a:hover, header a:active, 
footer a:link, footer a:visited, footer a:hover, footera:active {
	color: inherit;
}

h1, h2, h3, h4, h5, h6 {
	font-family: 'Komplekt 070', sans-serif;
}

:is(h1, h2, h3, h4, h5, h6) a {
	text-decoration: none;
	color: var(--text) !important;
}

:is(h1, h2, h3, h4, h5, h6) {
	margin-block-start: 0.75em;
	padding-top: 0.75em;
}

header h1:first-of-type, main h1:first-of-type {
	margin-block-start: 0;
	padding-top: 0;
}

h1 { font-size: 170%; }
h2 { font-size: 130%; }
h3 { font-size: 120%; }
h4, h5, h6 { font-size: 110%; }

p, li {
	line-height: 1.45;
}

header {
	grid-area: header;
	display: flex;
	flex-direction: column;
	gap: 1rem;
	min-width: 9ch;
	/*max-width: 15ch;*/
}

header nav {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
	margin-top: 1em;
}

header nav ul {
	list-style: none;
	padding: 0;
	margin: 0;
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
}

header nav .active:before {
	content: "→";
}

footer ul {
	list-style: none;
	padding: 0;
}

footer li {
	display: inline-block;
	margin-right: .75rem;
}

header nav {
	font-size: 90%;
}

header nav ul a {
	text-decoration: none;
}

main {
	grid-area: main;
	width: 100%;
}

main p, main li {
	max-width: 64rem;
}

p:has(> img:first-child) {
	max-width: 100%;
}

footer {
	grid-column: 2;
	color: light-dark(var(--secondary-light), var(--secondary-dark));
	font-size: 0.9em;
	padding-top: 2rem;
}

footer hr {
	border: 0;
	border-bottom: 1px solid light-dark(var(--secondary-light), var(--secondary-dark));
}

img {
	border-radius: 5px;
}

/* Notices */

.notice {
	background: light-dark(var(--notice-light), var(--notice-dark));
	border-radius: var(--border-radius);
	padding: .1em 1em 1em 3.5em;
	position: relative;
	letter-spacing: 1px;
	max-width: 64rem;
}

.notice p {
	line-height: 1.3;
}

.notice a {
	color: inherit !important;
}

.notice .icon {
	display: block;
	width: 1.75em;
	height: 1.75em;
	line-height: 0;
	position: absolute;
	left: 1em;
	top: calc(50% - .6em);
}

.notice.success { /* checkmark */
	background: light-dark(var(--green-6), var(--green-9));
	color: light-dark(var(--white), var(--white));
}

.notice.warning { /* exclamation point */
	background: light-dark(var(--yellow-5), var(--yellow-8));
	color: light-dark(var(--black), var(--black));
}

.notice.error {/* bomb */
	background: light-dark(var(--red-7), var(--red-9));
	color: light-dark(var(--white), var(--white));
}

.standard {
	background: var(--button-standard-bg);
	color: var(--button-standard-fg);
}

.destructive {
	background: var(--button-destructive-bg);
	color: var(--button-destructive-fg);
}

.emphasis {
	background: var(--button-emphasis-bg);
	color: var(--button-emphasis-fg);
}

.mono, code, pre {
	font-family: 'Berkeley Mono', monospace;
	font-size: 90%;
}

small, .small {
	font-size: 85%;
	line-height: 1.1 !important;
}


/* Lists */

ul {
	list-style: none;
	padding-left: 1em;
}

ol {
	list-style: digit;
	padding-left: 2em;
}

ul li:before {
	font-family: 'MD IO', monospace;
	content: "\2022";
	line-height: 0;
	margin-right: .5em;
}

nav ul li:before {
	content: none;
}

footer ul li:before {
	content: none;
}

ol ol {
	list-style: lower-alpha;
}

ol ol ol {
	list-style: lower-roman;
}

ul ul li:before {
	opacity: .6;
}

ul ul ul li:before {
	opacity: .3;
}

/* Description Lists */

dt {
	font-weight: normal;
	margin: 0;
}

dd {
	margin: inherit;
	margin: 0;
	margin-top: .5em;
	margin-bottom: 1em;
}

/* Forms */

input[type="password"] {
	font-family: 'Berkeley Mono', monospace;
}

input, button, .action, fieldset, legend, label, option, select {
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	all: unset;
	margin-bottom: 1rem;
}

fieldset {
	margin: 0;
	padding: 0;
	background: white;
}

fieldset legend {
	font-weight: normal;
}

/*
form p {
	margin: 0 0 1em 0;
}
*/

label, .form-label {
	font-weight: bold;
	display: block;
	margin-bottom: .25em;
}

input, button, textarea {
	margin: 0;
	margin-right: .5em;
	padding: .5em;
	border: 1px solid var(--gray-5);
	border-radius: var(--border-radius);
}

input, textarea {
	width: 100%;
}

textarea {
	height: 5em;
}


select {
	padding: .6em .5ch .5ch .5ch !important;
}

button, .button, .action {
	display: inline-block;
	background: light-dark(var(--link-light), var(--link-dark));
	color: light-dark(var(--primary-dark), var(--primary-light));
	white-space: nowrap;
	font-weight: bold;
}

button svg, .button svg, .action svg {
	fill: light-dark(var(--primary-dark), var(--primary-light));
	padding-right: .25em;
}

.nowrap {
	white-space: nowrap;
}

.wrap {
	white-space: normal;
}

button:hover, .button:hover, .action:hover {
	cursor: pointer;
	filter: var(--button-filter);
	transition: filter .2s;
}

label:hover {
	cursor: pointer;
}

input[type="text"], input[type="email"], input[type="password"] {
	width: calc(100% - 5ch);
}

input[type="checkbox"]:disabled + label {
	cursor: not-allowed;
}

input, button, .button {
	border: 1.5px solid light-dark(var(--secondary-light), var(--secondary-light));
	border-radius: .25ch;
	padding: .5rem 1rem;
}

form {
	width: 100%;
}

select:hover {
	cursor: pointer;
}

input {
	display: block;
	width: 100%;
}

input:disabled {
	opacity: .25;
}

input:disabled + label {
	opacity: .25;
}

input[type="checkbox"] {
	display: inline-block;
	width: 1em;
	height: 1.1em;
	padding: 0 .1em .16em .1em;
	text-align: center;
}

input[type="checkbox"]:hover {
	cursor: pointer;
}

input[type="checkbox"]:checked::before {
	content: "╳";
}

input[type="checkbox"]::before {
	content: "\00a0";
}

input[type="checkbox"]:disabled {
	cursor: not-allowed;
}

input[type="checkbox"] + label {
	display: inline-block;
}

label + a {
	margin-left: .5em;
}

button, input[type="submit"] {
	border-radius: var(--border-radius);
	border: none;
}

button:hover, input[type="submit"]:hover {
	cursor: pointer;
}

/* Tables */




.table-wrapper {
	overflow-x: auto;
	max-width: calc(100vw - 2em) !important;
}

.table-wrapper table {
	/*min-width: 600px;*/ /* or max-content */
}




table {
	border-collapse: collapse;
	
}

td, th {
	padding: .7em 1.5em .7em 0;
	border-bottom : 1px solid light-dark(var(--secondary-light), var(--secondary-dark));
}

.borderless td {
	border: 0;
	padding-bottom: 0;
}

.centered {
	text-align: center;
}

th {
	text-align: left;
}

/* Fancypants Stuff */

@view-transition {
	navigation: auto;
}

::view-transition-old(root),
::view-transition-new(root) {
	animation-duration: 0.1s;
	animation-timing-function: ease-in-out;
}

/* Misc */

img {
	max-width: 100%;
}

/* Responsiveness */

@media (max-width: 1500px) {
	#logotype {
		width: 125px;
	}
	body {
		font-size: 1.3em;
		column-gap: 4rem;
		padding: 4rem;
	}
}

@media (max-width: 1000px) {
	body {
		font-size: 1.2em;
		grid-template-columns: 1fr;
		grid-template-areas: "header" "main" "footer";
		padding: 2rem;
	}
	
	header {
		flex-direction: row;
		justify-content: felex-start;
		flex-flow: column wrap;
		flex-wrap: wrap;
	}
	
	header h1 {
		margin: 0;
	}
	
	header nav {
		flex-direction: row;
		gap: 1rem;
		margin-top: 0;
	}
	
	header nav ul {
		flex-direction: row;
		flex-wrap: wrap;
	}
	
	footer {
		grid-column: auto;
	}
}

@media (max-width: 500px) {
	body {
		font-size: 1em;
		padding: 1rem;
	}
}

#open-modal {
	float: right;
	padding: 1em 0 .5em .5em;
	margin: 1em 0 0 0;
}

#open-modal svg {
	height: 2em !important;
}

/*
#modal {
	margin: auto;
	background: #261402;
	color: #E8AE15;
	max-width: 90%;
	width: 47ch;
	padding: 1em;
	border: none !important;
	border-radius: var(--border-radius);
}

#modal * {
	font-family: 'Berkeley Mono', monospace;
	font-weight: normal;
	font-style: normal;
	margin: 0;
	padding: 0;
	line-height: 1.4;
}

#modal h2 {
	margin-bottom: 1em;
	text-transform: uppercase;
	overflow: none;
	border-bottom: 2px solid currentcolor;
	padding-bottom: 10px;
	font-size: 1em;
}

#modal svg {
	fill: #E8AE15;
	height: 1em !important;
	vertical-align: middle !important;
	margin: -.25em .25em 0 0 !important;
}

#modal button {
	float: right;
	text-transform: uppercase;
	font-size: 1em;
	background: inherit;
	color: inherit;
}

footer button {
	background: inherit;
	color: inherit;
}

*/


::backdrop {
	backdrop-filter: blur(5px);
}


#message {
	margin: auto;
	max-width: 90%;
	width: 60ch;
	background: light-dark(var(--background-light), var(--background-dark));
	color: light-dark(var(--primary-light), var(--primary-dark));
	padding: 1.5em;
	border: none !important;
	border-radius: var(--border-radius);
}

#message :is(h1, h2, h3, h4, h5, h6) {
	margin-top: 0;
	padding-top: 0;
}

/*
#message * {
	font-family: 'Berkeley Mono', monospace;
	font-weight: normal;
	font-style: normal;
	margin: 0;
	padding: 0;
	line-height: 1.4;
}

#message h2 {
	margin-bottom: 1em;
	text-transform: uppercase;
	overflow: none;
	border-bottom: 2px solid currentcolor;
	padding-bottom: 10px;
	font-size: 1em;
}
*/


#message button {
	float: right;
}

.info-icon {
	padding-left: .3em;
}

.info-icon:hover {
	cursor: pointer;
}

.broadcast {
	margin: -1em;
	margin-bottom: 1.5em;
	padding: .66em 1em;
	background: light-dark(#fff, #000);
	color: light-dark(#000, #fff);
	border-radius: var(--border-radius);
}

.broadcast p {
	margin: 0;
	padding: 0;
	max-width: 100%;
}

#broadcast svg {
	fill: currentcolor;
}

#published-updated {
	margin-top: 2em;
	font-size: 90%;
	opacity: .8;
}