@layer reset, component, layout;

@layer reset {
	* {
		box-sizing: border-box;
		margin: 0;
	}

	:root {
		scrollbar-gutter: stable;
		color-scheme: dark;
	}
}

@layer component {
	body {
		font-family: system-ui;
		--background-color: #282828;
		background-color: var(--background-color);
		color: #fff;
		font-size: 1.4rem;
		padding-block: 2rem;
	}

	input {
		font-size: inherit;
	}

	input[type="number"] {
		inline-size: 8ch;
		text-align: right;
		appearance: none;
		background-color: transparent;
		border: 1px solid gray;
		border-radius: 3px;
		padding: .2em 8px;
	}

	form {
		font-size: 1.2rem;
		border: none;
		border-top: gray;
		background-color: var(--background-color);
		background-image: linear-gradient(
			to bottom,
			#eee6,
			transparent 50%
		);
		box-shadow: 0 4px 4px 1px rgb(0 0 0 / .4);
		padding-block: 8px;
		padding-inline: calc(12px + env(safe-area-inset-left)) calc(12px + env(safe-area-inset-right));
		text-align: center;
	}

	fieldset {
		border: none;
		padding: 0;
	}

	.radio-button label {
		display: inline flow-root;
		border: 4px solid;
		border-color: #eee #555 #777 #fff;
		padding: 4px 8px;
		background-color: var(--background-color);
		color: #ddd;
		transition: border-color 100ms, scale 100ms, color 100ms;
	}

	.radio-button :checked ~ label {
		border-color: #777 #eee #fff #555;
		background-color: #111;
		color: inherit;
		scale: 1.1;
	}

	.radio-button :focus-visible ~ label {
		outline: 2px solid white;
		outline-offset: 2px;
	}

	.time-list-item {
		border-radius: 8px;
		box-shadow: inset 2px 2px 18px 0px rgb(0 0 0 / 0.6);
		background-color: #222;
		padding: 8px;
		font-size: 2rem;
		font-weight: bold;
		font-variant-numeric: tabular-nums;
	}
}

@layer layout {
	body {
		display: grid;
		gap: 1em;
	}

	img {
		inline-size: 100%;
	}

	[visually-hidden] {
		position: absolute;
		width: 0;
		height: 0;
		clip-path: inset(50%);
	}

	:where(.inline-size) {
		& > * {
			--max: 60rem;
			--gutter: 12px;
			--respect-safe-area: 1;
			margin-inline:
				max((100% - var(--max)) / 2, env(safe-area-inset-left) * var(--respect-safe-area) + var(--gutter))
				max((100% - var(--max)) / 2, var(--gutter) + env(safe-area-inset-right) * var(--respect-safe-area));
		}
	}

	time-angle-converter {
		display: contents;
	}

	form {
		--max: 100%;
		--gutter: 0px;
		--respect-safe-area: 0;
		position: sticky;
		inset-block-start: 0;
		margin-block-start: -2rem;
		z-index: 1;
		display: grid;
		row-gap: .8em;
		touch-action: pinch-zoom;
	}

	fieldset {
		margin-inline: auto;
		display: flex;
		gap: 8px;
	}

	main {
		display: grid;
		gap: 1em;
	}

	aside {
		--max: 100%;
		--gutter: 0px;
		--respect-safe-area: 0;

		& > * {
			--max: 50rem;
			--gutter: 12px;
			--respect-safe-area: 1;
		}
	}

	p:has(img) {
		--gutter: 0px;
	}

	.by-angle-controls {
		margin-inline: auto;
		display: grid;
		align-items: center;
		gap: 8px;
		grid-template-columns: auto minmax(auto, 16rem);

		input[type="range"] {
			inline-size: 100%;
		}
	}

	.by-angle-result,
	.by-time-result {
		display: contents;
	}

	time-angle-converter:has(#by-angle-radio:checked) [data-for-mode="by-time"] {
		display: none;
	}

	time-angle-converter:has(#by-time-radio:checked) [data-for-mode="by-angle"] {
		display: none;
	}

	.time-clock-wrapper {
		inline-size: 100%;
		max-inline-size: clamp(14rem, 60%, 20rem);
		justify-self: center;
	}

	.time-list {
		list-style-type: "";
		padding: 0;
		display: grid;
		grid-template-columns: repeat(auto-fit, minmax(min(16rem, 100%), 1fr));
		gap: 12px;
	}

	.time-list-item {
		display: grid;
		grid-template-columns: minmax(auto, 30%) 7.5ch;
		align-items: center;
		gap: .5rem 12px;
	}

	.prose {
		line-height: 1.3;

		& > :not(:first-child) {
			margin-block-start: .8em;
		}
	}
}