:root {
	--common-border-radius: 0.3em;

	--input-default-background-color: var(--tertiary-background-color);
	--input-default-border-color: var(--brand-color);
	--input-default-text-color: inherit;
	--input-hover-background-color: var(--input-default-background-color);
	--input-hover-border-color: var(--secondary-accent-color);
	--input-hover-text-color: var(--input-default-text-color);
	--input-focus-background-color: var(--input-default-background-color);
	--input-focus-border-color: var(--secondary-accent-color);
	--input-focus-text-color: var(--input-default-text-color);
	--input-disabled-background-color: var(--secondary-background-color);
	--input-disabled-border-color: var(--muted-color);
	--input-disabled-text-color: var(--muted-color);
	--input-border-radius: var(--common-border-radius);

	--button-default-background-color: var(--primary-background-color);
	--button-default-border-color: var(--brand-color);
	--button-default-text-color: var(--brand-color);
	--button-hover-background-color: var(--secondary-accent-color);
	--button-hover-border-color: var(--secondary-accent-color);
	--button-hover-text-color: var(--primary-background-color);
	--button-focus-background-color: var(--secondary-accent-color);
	--button-focus-border-color: var(--secondary-accent-color);
	--button-focus-text-color: var(--primary-background-color);
	--button-cta-background-color: var(--brand-color);
	--button-cta-border-color: var(--brand-color);
	--button-cta-text-color: var(--primary-background-color);
	--button-disabled-background-color: var(--primary-background-color);
	--button-disabled-border-color: var(--muted-color);
	--button-disabled-text-color: var(--muted-color);
	--button-border-radius: var(--common-border-radius);

	--link-default-text-color: var(--secondary-accent-color);
	--link-secondary-text-color: var(--brand-color);
	--link-border-radius: 0.2em;

	--toast-background-color: var(--inverted-background-color);
	--toast-foreground-color: var(--inverted-foreground-color);
	--toast-progress-color: var(--success-color);
	--toast-progress-critical-color: var(--alert-color);

	--icon-color: currentcolor;
	--icon-scale: 1.5;

	--progress-background-color: var(--primary-background-plus-color);
	--progress-foreground-color: var(--secondary-foreground-color);

	--chart-background: var(--primary-background-color);
	--chart-foreground: var(--primary-foreground-color);

	background: var(--primary-background-color);
	color: var(--primary-foreground-color);
	font-family: Lexend, sans-serif;
	line-height: 1.5;
}


label,
button,
summary,
a {
	position: relative;
}

a, .link {
	color: var(--link-default-text-color);
}

:is(a, .link):is(:hover, :focus-visible) {
	color: var(--link-secondary-text-color);
	border-radius: var(--link-border-radius);
}

:is(a, .link):focus-visible {
	outline: thin solid var(--link-secondary-text-color);
}

form:not([hidden]) {
	display: flex;
	gap: 1em;
}

form:not([hidden]):not(.inline-form),
label:not([hidden]) {
	flex-direction: column;
}

.inline-form:not([hidden]) {
	display: flex;
}

label {
	gap: 0.5em;
}

input:not([type=checkbox]):not([type=radio]),
textarea,
select,
.action {
	border-width: 0.1em;
	border-style: solid;
	outline: none;
	padding: 0.8em;
	min-height: 3.5em;

	text-decoration: none;

	transition-property: border-color, background-color, color;
	transition-duration: 0.3s;
}

input,
textarea,
select {
	background: var(--input-default-background-color);
	border-color: var(--input-default-border-color);
	color: var(--input-default-text-color);
	border-radius: var(--input-border-radius);
}

input:not([type=checkbox]):not([type=radio]),
textarea,
select {
	width: 100%;
}

:is(input, textarea, select):hover {
	background: var(--input-hover-background-color);
	border-color: var(--input-hover-border-color);
	color: var(--input-hover-text-color);
}

:is(input, textarea, select):is(:focus-visible) {
	background: var(--input-focus-background-color);
	border-color: var(--input-focus-border-color);
	color: var(--input-focus-text-color);
}

:is(input, textarea, select):disabled {
	background: var(--input-disabled-background-color);
	border-color: var(--input-disabled-border-color);
	color: var(--input-disabled-text-color);
}

.action:not([hidden]) {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.5em;
	min-width: 3.5em;

	border-radius: var(--button-border-radius);
	font-weight: bold;
}

.action {
	background-color: var(--button-default-background-color);
	border-color: var(--button-default-border-color);
	color: var(--button-default-text-color);
}

.action:hover {
	border-color: var(--button-hover-border-color);
	background-color: var(--button-hover-background-color);
	color: var(--button-hover-text-color);
}

.action:focus-visible {
	border-color: var(--button-focus-border-color);
	background-color: var(--button-focus-background-color);
	color: var(--button-focus-text-color);
}

.action:disabled {
	background-color: var(--button-disabled-background-color);
	border-color: var(--button-disabled-border-color);
	color: var(--button-disabled-text-color);
}

.link {
	appearance: none;

	background: transparent;
	border: 0;
	color: inherit;
	font: inherit;
}

:root {
	--checkbox-accent-color: var(--button-default-border-color);
}

input[type=checkbox],
input[type=radio] {
	flex: none;
	
	appearance: none;
	display: inline-flex;
	justify-content: center;
	align-items: center;
	width: 1.4em;
	aspect-ratio: 1;

	background-color: var(--primary-background-plus-color);
	border: 0.1em solid var(--checkbox-accent-color);
}

:is(
	input[type=checkbox],
	input[type=radio]
)::before {
	content: '';

	display: inline-flex;
	width: 66%;
	height: 66%;

	background-color: var(--checkbox-accent-color);

	transition: transform 0.2s, height 0.2s;
}

input[type=checkbox]:indeterminate::before {
	height: 20%;
}

:is(
	input[type=checkbox],
	input[type=radio]
):not(:checked):not(:indeterminate)::before {
	transform: scale(0);
}

:is(
	input[type=checkbox],
	input[type=radio]
):is(:hover, :focus-visible) {
	--checkbox-accent-color: var(--button-focus-border-color);
}

:is(input[type=checkbox],
	input[type=radio]):disabled {
	--checkbox-accent-color: var(--button-disabled-border-color);
}

input[type=checkbox] {
	border-radius: 0.2em;
}

input[type=checkbox]::before {
	border-radius: 0.1em;
}

input[type=radio] {
	border-radius: 50%;
}

input[type=radio]::after {
	border-radius: 50%;
}

:is(
	input[type=checkbox],
	input[type=radio]
):disabled {
	--checkbox-accent-color: var(--button-disabled-border-color);
}


a:has(.logo) {
	text-decoration: none;
}

.logo {
	height: 1.5em;

	font-size: 180%;
	font-weight: bold;
	text-transform: lowercase;
	letter-spacing: -0.04em;
	white-space: nowrap;
	color: var(--brand-color);
}

.logo > span {
	display: inline-block;
	color: var(--primary-accent-color);
	transform: rotate(-18deg);
}

.password-input {
	display: flex;
	gap: 0.4em;
	flex-wrap: wrap;
}

.password-input input {
	flex: 1;
}

.password-input button {
	flex: none;
}

.label-callout {
	display: inline-block;
	position: absolute;
	top: -1em;
	left: 1em;
	padding: 0.1em 0.5em;

	border-radius: 0.4em;
	border: 0.14em solid var(--input-default-border-color);
	background: var(--input-default-background-color);
	font-size: 87.5%;

	transition-property: border-color, background-color, color;
	transition-duration: 0.3s;
}

label:is(:hover, :has(:focus-visible)) .label-callout {
	border-color: var(--input-hover-border-color);
	background: var(--button-hover-background-color);
	color: var(--button-hover-text-color);
}

.alt-text {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip-path: inset(50%);
}

.special-section:not([hidden]) {
	display: flex;
	flex-direction: column;
	gap: 1em;
	max-width: min(30em, 80vw);
	margin: 0 auto;
	padding: 1.5em;

	border-radius: 0.3em;
	border: 0.1em solid var(--secondary-background-color);
	box-shadow: 0 0.2em 0.5em var(--tertiary-background-color);
}

.special-section .heading {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5em;
	justify-content: space-between;

	font-weight: bold;
	padding-bottom: 0.5em;
	border-bottom: 0.1em solid var(--primary-background-plus-color);
}

x-icon:not([hidden]) {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 1em;
	aspect-ratio: 1;
}

x-icon svg {
	--icon-stroke: calc(1.5 / var(--icon-scale));
	width: 1em;
	aspect-ratio: 1;
	transform: scale(var(--icon-scale));
}