@media (prefers-color-scheme: light) {
	:root {
		--red: 197, 134, 135;
		--orange: 198, 152, 131;
		--yellow: 196, 170, 128;
		--lime: 171, 177, 130;
		--green: 145, 167, 122;
		--aqua: 116, 164, 139;
		--skye: 113, 159, 150;
		--snow: 119, 153, 163;
		--blue: 130, 148, 173;
		--purple: 168, 151, 184;
		--pink: 196, 153, 184;
		--cherry: 194, 159, 178;

		--text: 43, 48, 52;
		--subtext1: 69, 83, 85;
		--subtext0: 87, 104, 105;

		--overlay2: 112, 125, 118;
		--overlay1: 130, 144, 132;
		--overlay0: 172, 181, 164;

		--surface2: 206, 204, 189;
		--surface1: 230, 225, 211;
		--surface0: 237, 232, 221;

		--base: 245, 239, 230;
		--mantle: 242, 234, 225;
		--crust: 232, 222, 213;
	}
}

@media (prefers-color-scheme: dark) {
	:root {
		--red: 245, 127, 130;
		--orange: 247, 161, 130;
		--yellow: 245, 208, 152;
		--lime: 219, 230, 175;
		--green: 203, 227, 179;
		--aqua: 179, 227, 202;
		--skye: 179, 230, 219;
		--snow: 175, 217, 230;
		--blue: 178, 202, 237;
		--purple: 210, 189, 243;
		--pink: 243, 192, 229;
		--cherry: 250, 230, 239;

		--text: 248, 249, 232;
		--subtext1: 173, 201, 188;
		--subtext0: 150, 180, 170;

		--overlay2: 131, 158, 154;
		--overlay1: 111, 135, 136;
		--overlay0: 88, 104, 109;

		--surface2: 74, 88, 92;
		--surface1: 55, 65, 69;
		--surface0: 38, 47, 51;

		--base: 30, 37, 40;
		--mantle: 25, 30, 33;
		--crust: 23, 28, 31;
	}
}

:root {
	--accent: var(--blue);
}

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

body {
	font-family:
		system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
	--mono: ui-monospace, "SF Mono", Menlo, Monaco, monospace;
	background: rgb(var(--base));
	color: rgb(var(--text));
	line-height: 1.5;
}

.content-area {
	display: flex;
	flex-direction: column;
	max-width: 768px;
	margin: 0 auto;
}

header {
	background: rgb(var(--crust));
	padding: 1rem;
	margin-bottom: 1rem;

	p {
		color: rgb(var(--subtext1));
		margin-bottom: 0.75rem;
	}

	div.row {
		margin-left: -0.5rem;
		margin-right: -0.5rem;
	}
}

.row {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.5rem;
}

button {
	background: none;
	border: none;
	padding: 0;
	margin: 0;
	font: inherit;
	color: inherit;
	cursor: pointer;
	outline: inherit;
}
* {
	outline: 0.2rem solid transparent;

	&:focus-visible {
		outline-color: rgb(var(--accent));
		z-index: 5;
	}
}

.button {
	display: inline-flex;
	align-items: center;
	gap: 0.25rem;

	color: rgb(var(--subtext1));
	background-color: rgb(var(--surface1));
	padding: 0.25rem 0.5rem;

	text-decoration: none;
	font-weight: bold;
	text-align: center;

	cursor: default;
	user-select: none;

	background-clip: padding-box;
	border-bottom: 0.2rem solid rgb(var(--overlay1));

	&:hover,
	&:focus-visible {
		background-color: rgb(var(--surface2));
		border-bottom-color: rgb(var(--overlay2));
		color: rgb(var(--text));
	}
	&:active {
		background-color: rgb(var(--surface0));
		color: rgb(var(--subtext0));
		border-bottom-color: transparent;
		transform: translateY(0.2rem);
	}

	&[disabled] {
		background-color: rgba(var(--surface1), 0.5);
		color: rgba(var(--subtext1), 0.5);
		border-bottom-color: rgba(var(--overlay1), 0.5);
		&:hover,
		&:focus-visible {
			background-color: rgba(var(--surface1), 0.75);
			color: rgba(var(--subtext1), 0.75);
			border-bottom-color: rgba(var(--overlay1), 0.75);
		}
		&:active {
			border-bottom-color: transparent;
			cursor: not-allowed;
			background-color: rgba(var(--red), 0.075);
			color: rgba(var(--red), 0.35);
		}
	}
}
a.button {
	cursor: pointer;
	&::after {
		content: "↗";
		margin-left: 0.25rem;
		font-size: 0.8rem;
	}
}

textarea {
	border: none;
	padding: 0.5rem;
	color: rgb(var(--text));
	background-color: rgb(var(--surface0));
	font-family: monospace;
	font-size: 0.95rem;
	resize: vertical;
	min-height: 4rem;
	width: 100%;

	&:focus-visible {
		background-color: rgb(var(--surface1));
	}
}

section {
	padding: 1rem;
	background-color: rgb(var(--mantle));
	margin-bottom: 1rem;
	margin-left: -0.5rem;
	margin-right: -0.5rem;

	h3 {
		margin: 0;
		font-size: 1.25rem;
		font-weight: bold;
		color: rgb(var(--text));
		margin-top: 1rem;
	}

	div.section-header {
		margin: -1rem -1rem 1rem -1rem;
		padding: 0.5rem 1rem;
		border-bottom: 1px solid rgb(var(--surface0));
		background-color: rgb(var(--crust));

		h2 {
			margin: 0;
			font-size: 1.25rem;
			font-weight: bold;
			color: rgb(var(--text));
		}

		p {
			margin: 0;
			font-size: 0.95rem;
			color: rgb(var(--subtext1));
		}
	}

	&.error {
		border: 2px solid rgba(var(--red), 0.5);
	}
}

form {
	display: grid;
	grid-template-columns: auto 1fr;
	gap: 0;

	label,
	input,
	textarea {
		padding: 0.5rem;
		resize: vertical;
		border: 0.2rem solid transparent;
	}

	textarea {
		resize: vertical;
		align-self: stretch;
		min-height: 4rem;
	}

	label:has(+ input:focus),
	label:has(+ textarea:focus) {
		background-color: rgba(var(--surface1), 1);
		color: rgb(var(--text));
		border-color: rgb(var(--accent));
	}

	label {
		font-weight: bold;
		font-size: 0.95rem;
		color: rgba(var(--subtext1), 0.95);
		border-right: none;
		white-space: nowrap;
		align-self: stretch;
		background-color: rgba(var(--surface0), 0.5);
	}

	input,
	textarea {
		padding: 0.25rem 0.5rem;
		background-color: rgba(var(--surface0), 0.25);
		color: rgb(var(--subtext0));
		font-family: inherit;
		font-size: 1rem;
		border-left: none;

		&:focus-visible {
			background-color: rgba(var(--surface0), 0.5);
			outline: none;
			border-color: rgb(var(--accent));
		}

		&::placeholder {
			color: rgb(var(--subtext0));
		}

		@media (prefers-color-scheme: dark) {
			&[type="datetime-local"]::-webkit-calendar-picker-indicator {
				filter: invert(1) brightness(0.5);
			}
		}
	}

	button.button {
		justify-self: stretch;
		padding: 0.5rem 1rem;
		font-size: 1rem;
		font-weight: bold;
		color: rgb(var(--text));
	}
}

#auth-did {
	font-weight: bold;
	font-family: var(--mono);
}

table {
	width: calc(100% + 2rem);
	border-collapse: collapse;
	margin: -0.75rem;

	thead {
		background-color: rgba(var(--surface0), 0.25);
		border-bottom: 1px solid rgba(var(--overlay0), 0.1);
	}

	th {
		padding: 0.75rem;
		text-align: left;
		font-weight: bold;
		color: rgba(var(--text), 1);
	}

	td {
		padding: 0.75rem;
		border-bottom: 1px solid rgba(var(--overlay0), 0.1);
		color: rgb(var(--subtext1));
		word-break: break-word;
	}

	tbody tr:hover {
		background-color: rgba(var(--surface0), 0.5);
	}
}

dialog {
	width: 100%;
	max-width: 600px;
	margin: 0 auto;
	background-color: rgba(var(--base), 1);
	color: rgb(var(--text));
	border: 0.2rem solid rgba(var(--overlay1), 0.1);

	@media (prefers-color-scheme: light) {
		box-shadow: 0 0.5rem 2rem rgba(var(--overlay1), 0.25);
	}

	top: 4rem;

	&::backdrop {
		background-color: rgba(var(--crust), 0.5);
		backdrop-filter: blur(0.5rem);
	}

	.dialog-header {
		display: flex;
		justify-content: space-between;
		background-color: rgba(var(--crust), 1);
		align-items: center;
		padding: 1rem;
	}

	.dialog-content {
		padding: 1rem;
	}
}