html {
	/* Blink does not support AccentColor (see https://issues.chromium.org/issues/40229450?pli=1) */
	--accent-color: #0033cc;

	@supports (color: -webkit-focus-ring-color) {
		--accent-color: -webkit-focus-ring-color;
	}

	@supports (color: AccentColor) {
		--accent-color: AccentColor;
	}

	--col-page: #f8f8f8;
	--col-back: Canvas;
	--col-text: #333333;
	--col-border: #808080;
	--col-back-faint: #fcfcfc;
	--col-text-faint: #444444;
	--col-border-faint: #aaaaaa;
	--col-shadow: #00000033;
	--col-button: #bfe0f3;
	--col-button-hover: #d2e9f7;
	--col-button-press: #a6cbe0;
	--col-button-text: #000000;

	@media (prefers-color-scheme: dark) {
		--col-page: #222222;
		--col-back: #111111;
		--col-text: #f8f8f8;
		--col-border: #aaaaaa;
		--col-back-faint: #181818;
		--col-text-faint: #dddddd;
		--col-border-faint: #999999;
		--col-shadow: #00000066;
		--col-button: #007fc8;
		--col-button-hover: #1698e9;
		--col-button-press: #04649c;
		--col-button-text: #ffffff;
	}

	@media (prefers-contrast: more) {
		--col-page: Canvas;
		--col-back: Canvas;
		--col-text: CanvasText;
		--col-border: CanvasText;
		--col-back-faint: Canvas;
		--col-text-faint: GrayText;
		--col-border-faint: GrayText;
		--col-shadow: transparent;
		--col-button: ButtonFace;
		--col-button-hover: ButtonFace;
		--col-button-press: ButtonFace;
		--col-button-text: ButtonText;
	}
}

body {
	font: 1em sans-serif;
	margin: 32px 8px 8px;
	background: var(--col-page);
	color: var(--col-text);
}

body.sub {
	margin: 4px;
}

#form {
	position: relative;
	width: 100%;
	max-width: 600px;
	margin: 0 auto;

	label {
		display: flex;
		flex-flow: column;
		width: 100%;
		gap: 8px;
		align-items: center;
		color: var(--col-text);
	}

	#timestamp {
		font-size: 1.5rem;
		border-radius: 100px;
		padding: 8px calc(24px + 2.5em) 8px 24px;
		line-height: 1;
		background: var(--col-back);
		color: var(--col-text);
		border: 1px solid var(--col-border);
		align-self: stretch;
		box-shadow: 0 1px 2px var(--col-shadow);
	}

	#submit {
		margin: 0;
		padding: 0 12px;
		font-size: 1rem;
		position: absolute;
		right: 5px;
		bottom: 5px;
		height: calc(1.8rem + 8px);
		border: none;
		border-radius: 100px;
		background: var(--col-button);
		color: var(--col-button-text);
		cursor: pointer;

		&:hover {
			background: var(--col-button-hover);

			&:active {
				background: var(--col-button-press);
			}
		}
	}
}

.out {
	display: block;
	border: none;
	max-width: 1000px;
	margin: 48px auto 0;
	width: 100%;
	min-height: max(calc(100vh - 200px), 540px);
}

.tabs {
	white-space: nowrap;
	overflow-x: auto;
	text-align: center;
	margin: 0 4px -1px;
	padding: 0 4px 1px;
	z-index: 1;

	& label {
		display: inline-block;
		margin: 0;
		padding: 0;

		& .tab {
			position: relative;
			display: inline-block;
			vertical-align: bottom;
			margin: 0 -1px 0 0;
			padding: 8px 16px;
			border: 1px solid var(--col-border-faint);
			border-top-left-radius: 4px;
			border-top-right-radius: 4px;
			border-bottom: none;
			background: var(--col-back-faint);
			color: var(--col-text-faint);
			cursor: pointer;
			font-weight: 300;
		}

		&:has(input:focus-visible) .tab::before {
			content: '';
			position: absolute;
			top: 4px;
			left: 4px;
			right: 4px;
			bottom: 7px;
			border: 2px solid var(--accent-color);
			border-radius: 4px;
			pointer-events: none;
		}

		&:has(input:checked) .tab {
			margin: 0 -2px 0 -1px;
			font-weight: 500;
			padding-bottom: 10px;
			background: var(--col-back);
			color: var(--col-text);
			border-color: var(--col-border);
			z-index: 1;
			box-shadow:
				-2px 0 2px -2px var(--col-shadow),
				2px 0 2px -2px var(--col-shadow);

			&::after {
				content: '';
				position: absolute;
				top: 100%;
				left: 0;
				right: 0;
				height: 1px;
				background: var(--col-back);
			}
		}
	}

	& input {
		display: inline-block;
		position: absolute;
		top: -100px;
		width: 1px;
		height: 1px;
		opacity: 0;
	}
}

.tab-content {
	border: 1px solid var(--col-border);
	border-radius: 4px;
	background: var(--col-back);
	padding: 8px;
	box-shadow: 0 1px 2px var(--col-shadow);
}

.tbody {
	display: none;
}

body:has(.tab.t0:checked) .tbody.t0,
body:has(.tab.t1:checked) .tbody.t1,
body:has(.tab.t2:checked) .tbody.t2,
body:has(.tab.t3:checked) .tbody.t3,
body:has(.tab.t4:checked) .tbody.t4,
body:has(.tab.t5:checked) .tbody.t5,
body:has(.tab.t6:checked) .tbody.t6,
body:has(.tab.t7:checked) .tbody.t7,
body:has(.tab.t8:checked) .tbody.t8,
body:has(.tab.t9:checked) .tbody.t9 {
	display: block;
}

dl {
	margin: 16px 0;
	padding: 0;
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 8px 16px;

	dt {
		margin: 0;
		padding: 0;
		text-align: right;
		font-weight: 600;
	}

	dd {
		margin: 0;
		padding: 0;
		white-space: nowrap;
	}
}