@font-face {
	font-family: "IBM Plex Mono";
	src: url("IBMPlexMono-Regular.woff2") format("woff2");
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: "IBM Plex Mono";
	src: url("IBMPlexMono-Italic.woff2") format("woff2");
	font-weight: 400;
	font-style: italic;
	font-display: swap;
}

@font-face {
	font-family: "IBM Plex Mono";
	src: url("IBMPlexMono-Bold.woff2") format("woff2");
	font-weight: 700;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: "IBM Plex Mono";
	src: url("IBMPlexMono-BoldItalic.woff2") format("woff2");
	font-weight: 700;
	font-style: italic;
	font-display: swap;
}

:root {
	color-scheme: light dark;

	--font-sans: system-ui, sans-serif;
	--font-mono: "IBM Plex Mono", monospace;

	--accent: oklch(0.72 0.12 150);
	--accent-light: oklch(from var(--accent) 0.92 calc(c * 0.55) h);
	--accent-dark: oklch(from var(--accent) 0.42 calc(c * 0.6) h);
	--accent-text: light-dark(
		oklch(from var(--accent) 0.46 c h),
		oklch(from var(--accent) 0.8 c h)
	);
	--accent-on: oklch(from var(--accent) 0.17 0.02 h);

	--control-height: 1.625rem;

	--font-size-sm: 0.875rem;
	--font-size-md: 1rem;
	--font-size-lg: 1.125rem;
	--font-size-xl: 2rem;

	--space-xs: 0.25rem;
	--space-sm: 0.5rem;
	--space-md: 0.75rem;
	--space-lg: 1rem;
	--space-xl: 1.5rem;

	--surface-desktop: light-dark(oklch(0.96 0.003 210), oklch(0.19 0.008 235));
	--surface: light-dark(oklch(0.935 0.003 200), oklch(0.28 0.009 235));
	--surface-raised: light-dark(oklch(0.975 0.002 200), oklch(0.33 0.01 235));
	--surface-sunken: light-dark(oklch(0.885 0.004 200), oklch(0.235 0.009 235));

	--panel-bg: light-dark(oklch(0.915 0.004 210), oklch(0.235 0.009 235));

	--shadow: light-dark(rgba(20, 28, 38, 0.3), rgba(0, 0, 0, 0.55));

	--text: light-dark(oklch(0.24 0.012 230), oklch(0.92 0.005 235));
	--text-bg: light-dark(oklch(0.996 0.001 210), oklch(0.28 0.009 235));
	--text-muted: light-dark(oklch(0.44 0.012 230), oklch(0.72 0.008 235));
	--text-faint: light-dark(oklch(0.6 0.01 230), oklch(0.55 0.008 235));

	--border: light-dark(oklch(0.79 0.006 230), oklch(0.42 0.01 235));
	--bevel-light: light-dark(oklch(1 0 0), oklch(0.46 0.012 235));
	--bevel-dark: light-dark(oklch(0.48 0.008 230), oklch(0.09 0.006 235));
}

::selection {
	color: var(--accent-on);
	background: var(--accent);
}

html,
body {
	margin: 0;
}

body {
	font-family: var(--font-sans);
	font-size: var(--font-size-md);
	color: var(--text);
	background: var(--surface-desktop);
}

main {
	display: flex;
	flex-direction: column;
	height: 100%;
	padding: var(--space-xl);
	background: var(--surface-desktop);
}

section {
	margin-bottom: var(--space-md);

	& > header {
		display: flex;
		flex-wrap: wrap;
		align-items: flex-end;
		justify-content: space-between;
		gap: var(--space-lg);
	}
}

h1,
h2,
p {
	margin: 0;
}

h1 {
	display: flex;
	align-items: center;
	gap: var(--space-sm);
	font-size: var(--font-size-xl);
	font-weight: 700;
}

h2 {
	font-family: var(--font-mono);
	font-size: var(--font-size-sm);
	font-weight: 400;
	color: var(--text-faint);
}

header p {
	margin-top: var(--space-xs);
	font-family: var(--font-mono);
	font-size: var(--font-size-lg);
	color: var(--text-faint);
}

menu {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--space-sm);
	margin: 0;
	padding: 0;
	list-style: none;

	& li {
		display: flex;
	}
}

button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--space-sm);

	padding-block: var(--space-sm);
	padding-inline: var(--space-md);

	font: inherit;
	font-weight: bold;
	font-family: var(--font-mono);
	text-transform: uppercase;

	white-space: nowrap;
	border: 1px solid var(--border);
	cursor: default;
	background-color: var(--panel-bg);
	box-shadow:
		inset 0 1px 0 var(--bevel-light),
		1px 1px 2px var(--shadow);

	svg {
		flex: 0 0 auto;
		width: auto;
		height: 1em;
	}

	&.sm {
		font-size: var(--font-size-sm);
	}

	&:active {
		transform: translate(1px);
		box-shadow: inset 0 1px 2px var(--bevel-dark);
		background-color: oklch(from var(--panel-bg) calc(l * 0.9) c h);
	}

	&:focus-visible {
		outline: 2px dotted var(--accent-text);
		outline-offset: 2px;
	}

	&[disabled] {
		opacity: 0.45;
	}

	&.primary {
		color: var(--accent-on);
		background-color: var(--accent);

		svg {
			color: var(--accent-on);
		}

		&:active {
			background-color: oklch(from var(--accent) calc(l * 0.9) c h);
		}
	}
}

nav {
	position: relative;
	display: flex;
	align-items: center;
	gap: var(--space-md);
	flex: 0 0 auto;
	height: 2.75rem;
	padding: 0 var(--space-md);
	background: linear-gradient(var(--surface-raised), var(--surface-sunken));
	box-shadow:
		inset 0 1px 0 var(--bevel-light),
		0 1px 0 var(--bevel-dark),
		0 2px 5px var(--shadow);
	border-bottom: 1px solid var(--border);

	& .brand {
		display: flex;
		align-items: center;
		gap: var(--space-sm);
		font-family: var(--font-mono);
		font-size: var(--font-size-lg);
		text-decoration: none;
		color: var(--text);
		user-select: none;

		& b {
			font-weight: 400;
			color: var(--accent-text);
		}
	}

	& ul {
		margin: 0 0 0 var(--space-sm);
		padding: 0;
		list-style: none;
	}

	& .auth-nav {
		margin-left: auto;
	}

	& li {
		display: inline-block;
		font-family: var(--font-mono);
	}

	& form {
		margin: 0;
	}

	& li a,
	& li button {
		display: inline-block;
		padding: var(--space-xs) var(--space-sm);
		height: auto;
		border: 0;
		font-family: inherit;
		font-weight: inherit;
		font-size: var(--font-size-md);
		text-decoration: none;
		color: var(--text-muted);
		background: transparent;
		box-shadow: none;
		cursor: pointer;

		&:hover {
			color: var(--accent-on);
			background: var(--accent);
		}
	}

	& img {
		display: block;
		flex: 0 0 auto;
		width: 2rem;
		height: 2rem;
	}
}

button.secondary:hover {
	background: var(--surface-raised);
}

.panel {
	display: flex;
	flex-direction: column;
	padding: var(--space-md);
	overflow: hidden;
	background: var(--surface-raised);
	box-shadow:
		inset 0 0 0 1px var(--border),
		0 1px 2px var(--shadow);

	& > header {
		display: flex;
		align-items: center;
		justify-content: flex-start;
		gap: var(--space-sm);
		height: var(--control-height);
		margin: calc(var(--space-md) * -1) calc(var(--space-md) * -1)
			var(--space-md);
		padding: 0 var(--space-md);
		font-family: var(--font-mono);
		font-size: var(--font-size-sm);
		font-weight: 700;
		letter-spacing: 0.02em;
		color: oklch(from var(--accent) 0.13 0.04 h);
		background:
			repeating-linear-gradient(oklch(1 0 0 / 0.14) 0 1px, transparent 1px 3px),
			var(--accent);
		box-shadow:
			inset 0 1px 0 var(--bevel-light),
			0 1px 0 var(--bevel-dark);
	}
}

dialog {
	min-width: 20rem;
	margin: auto;
	padding: var(--space-xl);
	color: var(--text);
	background: var(--surface-raised);
	border: 1px solid var(--border);
	box-shadow:
		inset 0 1px 0 var(--bevel-light),
		0 4px 16px var(--shadow);

	&::backdrop {
		background: oklch(0 0 0 / 0.4);
	}

	& form {
		display: grid;
		gap: var(--space-md);
	}

	& label {
		display: grid;
		gap: var(--space-xs);
		font-family: var(--font-mono);
		font-size: var(--font-size-sm);
		color: var(--text-muted);

		&:has(input[type="checkbox"]) {
			grid-auto-flow: column;
			justify-content: start;
			align-items: center;
			gap: var(--space-sm);
		}
	}

	& menu {
		justify-content: flex-end;
		margin-top: var(--space-sm);
	}
}

.autocomplete {
	position: absolute;
	z-index: 1;
	inset: 100% 0 auto;
	display: grid;
	justify-content: stretch;
	gap: 0;
	margin-top: 0;
	max-height: 12rem;
	overflow-y: auto;
	background: var(--text-bg);
	border: 1px solid var(--border);
	box-shadow: 1px 2px 4px var(--shadow);

	&[hidden] {
		display: none;
	}

	& li,
	& button {
		width: 100%;
	}

	& li[hidden] {
		display: none;
	}

	& button {
		justify-content: start;
		padding: var(--space-xs) var(--space-sm);
		font-weight: 400;
		text-align: left;
		text-transform: none;
		background: var(--text-bg);
		border: 0;
		box-shadow: none;

		&:hover,
		&:focus-visible {
			color: var(--accent-on);
			background: var(--accent);
			outline: 0;
		}
	}
}

.autocomplete-field {
	position: relative;
}

input[type="text"],
select {
	padding: var(--space-sm);
	font: inherit;
	font-family: var(--font-mono);
	color: var(--text);
	background: var(--text-bg);
	border: 1px solid var(--border);
	box-shadow: inset 0 1px 2px
		color-mix(in oklch, var(--bevel-dark), transparent 70%);

	&:focus-visible {
		outline: 2px dotted var(--accent-text);
		outline-offset: 2px;
	}
}

table {
	margin-top: var(--space-lg);
	border: 1px solid var(--border);
	border-collapse: collapse;
	width: 100%;
	background: var(--text-bg);
	box-shadow: 1px 1px 2px var(--shadow);

	th {
		background-color: var(--panel-bg);
		box-shadow: inset 0 1px 0 var(--bevel-light);
		padding: var(--space-sm) var(--space-md);
		font-family: var(--font-mono);
		font-size: var(--font-size-sm);
		font-weight: 700;
		letter-spacing: 0.07em;
		text-align: left;
		text-transform: uppercase;
		color: var(--text-faint);
	}

	td {
		padding: var(--space-sm) var(--space-md);
		border-top: 1px solid var(--border);
	}

	tr:hover {
		background: color-mix(in oklch, var(--accent), transparent 92%);
	}
}