*,
::before,
::after {
	box-sizing: border-box;
}

:where(:root) {
	--transition-focus: outline-offset 145ms var(--ease-2);

	@supports (transition-timing-function: linear(0, 1)) {
		--transition-focus: outline-offset 145ms var(--ease-spring-3);
	}
}

:where(:not(dialog)) {
	margin: 0;
}

:where(:not(fieldset, progress, meter)) {
	border-width: 0;
	border-style: solid;
	background-origin: border-box;
	background-repeat: no-repeat;
}

:where(html) {
	block-size: 100%;
	font-family: var(--font-sans);
	line-height: 1.5;
	-webkit-text-size-adjust: none; /* https://kilianvalkhof.com/2022/css-html/your-css-reset-needs-text-size-adjust-probably/ */

	@media (--motionOK) {
		scroll-behavior: smooth;
	}
}

@media (--motionOK) {
	:where(:focus-visible) {
		transition: var(--transition-focus);
	}
	:where(:not(:active):focus-visible) {
		transition-duration: 0.25s;
	}
}

:where(:not(:active):focus-visible) {
	outline-offset: 5px;
}

:where(body) {
	min-block-size: 100%;
}

:where(h1, h2, h3, h4, h5, h6) {
	line-height: 1.25;
	font-weight: var(--font-weight-9);
	text-wrap: balance;
}

:where(h1) {
	font-size: var(--font-size-8);
	max-inline-size: var(--size-header-1);
}

:where(h2) {
	font-size: var(--font-size-6);
	max-inline-size: var(--size-header-2);
}

:where(h3) {
	font-size: var(--font-size-5);
}
:where(h4) {
	font-size: var(--font-size-4);
}
:where(h5) {
	font-size: var(--font-size-3);
}

:where(h3, h4, h5, h6, dt) {
	max-inline-size: var(--size-header-3);
}

:where(p, ul, ol, dl, h6) {
	font-size: var(--font-size-2);
}

:where(a, u, ins, abbr) {
	text-underline-offset: 1px;

	@supports (-moz-appearance: none) {
		text-underline-offset: 2px;
	}
}

:where(
		a[href],
		area,
		button,
		input:not(
				[type='text'],
				[type='email'],
				[type='number'],
				[type='password'],
				[type=''],
				[type='tel'],
				[type='url']
			),
		label[for],
		select,
		summary,
		[tabindex]:not([tabindex*='-'])
	) {
	cursor: pointer;
}

:where(
		a[href],
		area,
		button,
		input,
		label[for],
		select,
		summary,
		textarea,
		[tabindex]:not([tabindex*='-'])
	) {
	touch-action: manipulation;
	-webkit-tap-highlight-color: transparent;
}

:where(a) {
	&:where([href]) {
		text-decoration-color: var(--link);

		&:where(:visited) {
			text-decoration-color: var(--link-visited);
		}
	}

	&:where(:not(:hover)) {
		text-decoration: inherit;
	}
}

:where(img, svg, video, canvas, audio, iframe, embed, object) {
	display: block;
}

:where(img, svg, video) {
	max-inline-size: 100%;
	block-size: auto;
}

:where(input, button, textarea, select),
:where(input[type='file'])::-webkit-file-upload-button {
	font: inherit;
	font-size: inherit;
	color: inherit;
	letter-spacing: inherit;
}

::placeholder {
	color: var(--color-8);
	opacity: 0.75;
}

:where(input:not([type='range']), textarea) {
	padding-inline: var(--size-2);
	padding-block: var(--size-1);
}

:where(select) {
	padding-inline: var(--size-4) 0;
	padding-block: var(--size-2);
	field-sizing: content;
}

:where(
		textarea,
		select,
		input:not([type='button'], [type='submit'], [type='reset'])
	) {
	background-color: var(--well-1);
	border-radius: var(--radius-2);
}

:where(textarea) {
	resize: block;
	field-sizing: content;
	min-block-size: 3rlh;
	min-block-size: 3lh;
	max-block-size: 80svh;
	min-inline-size: var(--size-content-1);
	max-inline-size: var(--size-content-2);
}

:where(input[type='checkbox'], input[type='radio']) {
	background-color: var(--well-1);
	block-size: var(--size-3);
	inline-size: var(--size-3);
}

:where(svg:not([width])) {
	inline-size: var(--size-10);
}

:where(code, kbd, samp, pre) {
	font-family: var(--font-mono);
}
:where(:not(pre) > code, kbd) {
	white-space: nowrap;
}

:where(pre) {
	white-space: pre;
	min-inline-size: 0;
	max-inline-size: max-content;
	writing-mode: lr;
	direction: ltr;
}

:where(:not(pre) > code) {
	padding: var(--size-1) var(--size-2);
	background: var(--surface-2);
	border-radius: var(--radius-2);
	writing-mode: lr;
}

:where(kbd, var) {
	padding: var(--size-1) var(--size-2);
	border-width: var(--border-size-1);
	border-color: var(--surface-4);
	border-radius: var(--radius-2);
}

:where(mark) {
	border-radius: var(--radius-2);
	padding-inline: var(--size-1);
}

:where(ol, ul) {
	padding-inline-start: var(--size-8);
}
:where(li) {
	padding-inline-start: var(--size-2);
}
:where(li, dd, figcaption) {
	max-inline-size: var(--size-content-2);
}
:where(p) {
	max-inline-size: var(--size-content-3);
	text-wrap: pretty;
}
:where(dt, summary) {
	font-weight: var(--font-weight-7);
}

:where(dt:not(:first-of-type)) {
	margin-block-start: var(--size-5);
}

:where(small) {
	font-size: max(0.5em, var(--font-size-0));
	max-inline-size: var(--size-content-1);
}

:where(hr) {
	margin-block: var(--size-fluid-5);
	height: var(--border-size-2);
	background-color: var(--surface-3);
}

:where(figure) {
	display: grid;
	gap: var(--size-2);
	place-items: center;

	& > :where(figcaption) {
		font-size: var(--font-size-1);
		text-wrap: balance;
	}
}

:where(blockquote, :not(blockquote) > cite) {
	border-inline-start-width: var(--border-size-3);
}

:where(blockquote) {
	display: grid;
	gap: var(--size-3);
	padding-block: var(--size-3);
	padding-inline: var(--size-4);
	max-inline-size: var(--size-content-2);
}

:where(:not(blockquote) > cite) {
	padding-inline-start: var(--size-2);
}

:where(summary) {
	background: var(--surface-3);
	padding: var(--size-2) var(--size-3);
	margin: calc(var(--size-2) * -1) calc(var(--size-3) * -1);
	border-radius: var(--radius-2);
}

:where(details) {
	padding-inline: var(--size-3);
	padding-block: var(--size-2);
	background: var(--surface-2);
	border-radius: var(--radius-2);
}

:where(details[open] > summary) {
	margin-bottom: var(--size-2);
	border-end-start-radius: 0;
	border-end-end-radius: 0;
}

:where(fieldset) {
	border-radius: var(--radius-2);
	border: var(--border-size-1) solid var(--surface-4);
}

:where(del) {
	background: var(--red-9, #c92a2a);
	color: var(--red-2, #ffc9c9);
}

:where(ins) {
	background: var(--green-9, #2b8a3e);
	color: var(--green-1, #d3f9d8);
}

:where(abbr) {
	text-decoration-color: var(--blue-5, #339af0);
}

:where(dialog) {
	background-color: var(--surface-1);
	color: inherit;
	border-radius: var(--radius-3);
	box-shadow: var(--shadow-6);

	&::backdrop {
		backdrop-filter: blur(25px);
	}
}

:where(html:has(dialog[open])) {
	overflow: hidden;
}

:where(menu) {
	padding-inline-start: 0;
	display: flex;
	gap: var(--size-3);
}

:where(sup) {
	font-size: 0.5em;
}

:where(table) {
	width: fit-content;
	border: 1px solid var(--surface-2);
	background: var(--surface-2);
	border-radius: var(--radius-3);

	--nice-inner-radius: calc(var(--radius-3) - 2px);
}

:where(table:not(:has(tfoot)) tr:last-child td:first-child) {
	border-bottom-left-radius: var(--nice-inner-radius);
}

:where(table:not(:has(tfoot)) tr:last-child td:last-child) {
	border-bottom-right-radius: var(--nice-inner-radius);
}

:where(table thead th:first-child) {
	border-top-left-radius: var(--nice-inner-radius);
}

:where(table thead th:last-child) {
	border-top-right-radius: var(--nice-inner-radius);
}

:where(tfoot th:first-of-type) {
	border-end-start-radius: var(--nice-inner-radius);
}

:where(tfoot th:last-of-type) {
	border-end-end-radius: var(--nice-inner-radius);
}

:where(th) {
	color: var(--text-1);
	background-color: var(--surface-2);
}

:where(table :is(a, button, [contenteditable]):is(:focus-visible)) {
	outline-offset: -2px;
}

:where(td) {
	background: var(--surface-1);
	max-inline-size: var(--size-content-2);
	text-wrap: pretty;
}

:where(td, th) {
	text-align: left;
	padding: var(--size-2);
}

:where(:is(td, th):not([align])) {
	text-align: center;
}

:where(thead) {
	border-collapse: collapse;
}

:where(table tr:hover td),
:where(tbody tr:nth-child(even):hover td) {
	background-color: var(--color-10);

	@media (prefers-color-scheme: light) {
		background-color: white;
	}
}

:where(table > caption) {
	margin: var(--size-3);
}

:where(tfoot button) {
	padding-block: var(--size-1);
	padding-inline: var(--size-3);
}