* {box-sizing: border-box; padding: 0; outline: 0; margin: 0; margin-block: 0; margin-inline: 0}
ul {list-style: none}
a {text-decoration: none}
button, input, select {font-size: 1em; line-height: inherit}
[contenteditable]:empty:before {content: attr(placeholder); cursor: text; width: fit-content}
i:empty {flex-grow: 1}
[hidden] {display: none !important}

:root {
	--sans-serif: system-ui, sans-serif;
	--background: rgba(255,255,255,1);
	--color: black;
	--deco: #e9e9e9;
	--label: #717171;
	--blur: blur(18px);
	--spacing: 0.5rem;
	--spacing2: 1rem;
	--blue: #0B93F6;
	--shadow: var(--label);
	--green: #65C567;
	--debug: 1px solid white;
	--border: 1px solid var(--deco);
	--label-filter: invert(79%) sepia(0%) saturate(0%) hue-rotate(345deg) brightness(98%) contrast(93%);
	--mobile-width: 640px;
	--avatar: 3.2em;
	--body: 100svh;
	--header: 3.5em;
	--footer: 3.5em;
	--inset-bottom: env(safe-area-inset-bottom, 0);
}

.green {
	color: var(--green) !important;
}

.invert {
	filter: invert(100%);
}

@media (prefers-color-scheme: dark) {
	:root {
		--background: black;
		--color: white;
		--deco: #2D2D2D;
		--label: #9f9f9f;
		--label-filter: invert(68%) sepia(0%) saturate(0%) hue-rotate(277deg) brightness(95%) contrast(85%) !important;
		--shadow: var(--deco);
	}

	img.icon {
		filter: invert(100%) !important;
	}

	img.invert {
		filter: none;
	}
}

html {
	font-size: 16px;
	background: var(--background);
}

a {
	color: var(--color);
}

body {
	font-family: var(--sans-serif);
	font-size: 1rem;
	line-height: 1.2;
	color: var(--color);
	min-height: calc(var(--body) - var(--footer) - var(--inset-bottom));
}

header, footer {
	/*position: sticky;*/
	position: fixed;
	z-index: 10000;
	width: 100%;
	background: var(--background);
	padding: 0 var(--spacing2);
	display: flex;
	align-items: center;
	gap: var(--spacing);
	h1 {
		font-weight: 900;
	}
}

header > *, footer > *, main > * {
	width: 100%;
	max-width: var(--mobile-width);
	margin: 0 auto;
}

header > *, footer > * {
	display: flex;
	align-items: center;
	gap: var(--spacing);
}

header {
	height: var(--header);
	top: 0;
	border-bottom: var(--border);
	background: var(--background);
}

main {
	padding-top: var(--header);
	padding-bottom: calc(var(--footer) + var(--inset-bottom));
	min-height: var(--body);
}

footer {
	height: calc(var(--footer) + var(--inset-bottom));
	bottom: 0;
	padding-bottom: var(--inset-bottom);
	border-top: var(--border);
}

a:active {
	background: var(--deco) !important;
}

.navbar {
	display: grid;
	grid: 1fr / repeat(5, 1fr);
	gap: var(--spacing);

	.selected {
		border: var(--border);
		background: var(--deco) !important;
	}


	a {
		display: flex;
		align-items: center;
		padding: var(--spacing) var(--spacing2);
		border-radius: 1.5em;
	}
}

hr {
	border: 0;
	border-bottom: var(--border);
	margin-top: 0;
	margin-bottom: 0;
}

.vr {
	display: block;
	height: calc(var(--spacing2) + 1.5em);
	width: 1px;
	background: var(--deco);
}

small {
	font-size: 0.75em;
}

progress {
	display: block;
	width: 100%;
}

dialog, input {
	background: none;
	color: var(--color);
	border: 0;
}

label, .label, [contenteditable]:empty:before, input::placeholder {
	color: var(--label)
}

img.avatar {
	height: var(--avatar);
	aspect-ratio: 1 / 1;
	border-radius: 100%;
}

p a {
	color: var(--blue);
	&:hover {
		text-decoration: underline;
	}
}

.block {
	display: block;
}

.flex {
	display: flex;
}

.wide {
	flex-grow: 1;
}

.square {
	aspect-ratio: 1 / 1;
}

.circle {
	aspect-ratio: 1 / 1;
	border-radius: 100%;
}

.slow, img {
	transition: opacity 300ms ease-in;
}

.fast {
	transition: none !important;
}

.lazy, .slow, .dynamic {
	opacity: 0;
	&.loaded {opacity: 1}
}


.mobile-width {
	max-width: var(--mobile-width);
	margin: 0 auto;
}

details.plain summary {
	list-style: none
}

details.plain summary::-webkit-details-marker {
	display:none
}

input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}


.button, button {
	user-select: none;
	touch-action: manipulation;
	transition: background 200ms ease-out;
	background: none;
	-webkit-tap-highlight-color: transparent;

	&:active {
		transition: none;
		background: var(--deco);
	}

	&:not(.custom) {
		position: relative;
		overflow: hidden;

		display: inline-flex;
		align-items: center;
		justify-content: center;
		
		background: var(--deco);
		color: var(--color);

		height: calc(var(--spacing2) + 1.5em);

		padding: 0 var(--spacing2);

		border-radius: 1.5em;
		border: 0;

		text-transform: uppercase;
		font-size: 0.9em;
		font-weight: bold;

		&.push {
			background: none;
		}

		&.push.active {
			background: var(--deco);
		}

		&:active {
			background: var(--label);
		}

		&:after {
			transition: opacity 300ms ease-in-out, background 300ms ease-in-out;
			content: '';
			display: block;
			position: absolute;
			left: 0;
			bottom: 0;
			width: 100%;
			height: 2px;
			background: transparent;
			opacity: 0;
		}

		&.loading:after {
			opacity: 1;
			background: var(--blue);
			animation: progress-keyframes 300ms infinite ease-in-out alternate;
		}
	}
}

@keyframes progress-keyframes {
	0% {
		transform: scaleX(1%);
		transform-origin: left;
	}
	50% {
		transform: scaleX(18%);
	}
	100% {
		transform: scaleX(1%);
		transform-origin: right;
	}
}

dialog {
	transition: opacity 400ms ease-in-out, transform 400ms ease-in-out;
	opacity: 1;
	transform: 0;

	&.hidden {
		transition: opacity 400ms ease-in-out, transform 400ms ease-in-out;
		opacity: 0;
		transform: translateY(100%);
	}
}

.checkbox-row {
	display: flex;
	justify-content: space-between;
	align-items: center;
	border-top: var(--border);
	&:last-child {border-bottom: var(--border)}
	padding: var(--spacing);
}

input[type=checkbox] {
	appearance: none;
	display: flex;
	padding: 1px;
	align-items: center;
	height: 1.4em;
	width: calc(2.8em - 2px);
	background: var(--shadow);
	border-radius: 1em;

	transition: background 300ms ease-in-out;

	&:after {
		transition: transform 300ms ease-in-out;

		content: "";
		display: block;
		background: white;

		height: 100%;
		aspect-ratio: 1 / 1;
		border-radius: 100%;
	}
}

input[type=checkbox]:checked {
	background: var(--green);

	&:after {
		transform: translateX(100%);
	}
}


.error {
	color: red !important;
}


.group-switch {
	img {
		margin-left: var(--spacing);
		height: 0.9em;
	}
}