/*
	Hi, welcome to my humble little CSS code, written in BEM style!
	
	Zoltán Hosszú, applying to 37signals
	05. 2025
*/


/* _________________________________________________________________________ */
/* FREQUENTLY REUSED ELEMENTS */

.flexrow {
	align-items: center;
	display: flex;
}



.btn {
	align-items: center;
	background: var(--color-background-button);
	border: 1px solid transparent;
	border-radius: var(--radius-max);
	color: var(--color-text-on-background);
	cursor: pointer;
	display: inline-flex;
	gap: 0.5rem;
	font-size: 1rem;
	font-weight: var(--bold-weight);
	padding: 0.75rem 1.5rem;
	text-align: center;
	text-decoration: none;
	transition: all 0.15s linear;
}

	.btn:hover {
		background: var(--color-background-button-hover);
		color: var(--color-text-on-background);
	}

.btn--secondary {
	background: var(--color-text-primary);
}

	.btn--secondary:hover { background: var(--color-text-primary-hover); }

.btn--outline {
	background: transparent;
	border: 1px solid var(--color-button-stroke);
	color: var(--color-text-primary);
}

	.btn--outline:hover {
		background: transparent;
		border-color: var(--color-text-primary-hover);
		color: var(--color-text-primary-hover);
	}

.btn--inverted {
	background: var(--color-background-jump-input);
	border: 1px solid var(--color-input-stroke);
	border-radius: var(--radius-1);
	color: var(--color-text-on-background);
}

	.btn--inverted:hover {
		background: var(--color-background-jump);
		border: 1px solid var(--color-input-stroke);
		color: var(--color-text-on-background);
	}

.btn--circle {
	align-items: center;
	color: var(--color-text-primary);
	display: flex;
	background: transparent;
	border: 1px solid var(--color-stroke);
	border-radius: var(--radius-max);
	height: 4rem;
	justify-content: center;
	width: 4rem;
}

	.btn--circle:hover {
		background: var(--color-background-highlight);
		color: var(--color-text-primary);
	}

.btn--circleprimary {
	background: var(--color-background-button);
	color: var(--color-text-on-background);
}

	.btn--circleprimary:hover {
		background: var(--color-background-button-hover);
		color: var(--color-text-on-background);
	}

.btn--ghost {
	background: var(--color-background-highlight);
	color: var(--color-text-primary);
}

	.btn--ghost:hover { background: var(--color-background-highlight-dark); }

.btn--small {
	border-radius: var(--radius-max);
	font-size: var(--font-s);
	padding: 0.5rem 1rem;
	text-transform: uppercase;
}



.icon {
	height: 1rem;
	min-height: 1rem;
	min-width: 1rem;
	width: 1rem;
}

.icon--m {
	height: 1.5rem;
	min-height: 1.5rem;
	min-width: 1.5rem;
	width: 1.5rem;
}

.icon--l {
	height: 2rem;
	min-height: 2rem;
	min-width: 2rem;
	width: 2rem;
}

.icon--xl {
	height: 3rem;
	min-height: 3rem;
	min-width: 3rem;
	width: 3rem;
}

.icon--resulticon {
	background: var(--color-jump-icon-default);
	border-radius: var(--radius-max);
	color: var(--color-background-jump);
	padding: 0.25rem;
}



.userphoto {
	border-radius: var(--radius-max);
	height: 1.5rem;
	width: 1.5rem;
}

.userphoto--overlapped {
	box-shadow: 0 0 0 2px var(--color-background-card);
	margin-right: -0.5rem;
}

.userphoto--inevent { box-shadow: 0 0 0 2px var(--color-background-highlight-light); }



.badge {
	background: var(--color-functional-notification);
	border-radius: var(--radius-2);
	display: inline-block;
	height: 0.5rem;
	text-indent: -9999px;
	width: 0.5rem;
}

.badge--innavbar {
	box-shadow: 0 0 0 2px var(--color-background-highlight-light);
	position: absolute;
	right: 1rem;
	top: 0.5rem;
	z-index: 2;
}


.dismiss {
	border-radius: var(--radius-1);
	display: inline-block;
	height: 2rem;
	text-indent: -9999px;
	width: 2rem;
}

	.dismiss:hover {
		background: var(--color-background-highlight);
	}
	
	.dismiss:before,
	.dismiss:after {
		background: var(--color-text-primary);
		content: '';
		display: block;
		height: 1.5px;
		left: 35%;
		position: absolute;
		top: 1rem;
		width: 10px;
	}
	
	.dismiss:before { rotate: 45deg; }
	
	.dismiss:after { rotate: -45deg; }



/* _________________________________________________________________________ */
/* PAGE LAYOUT BLOCKS */

.navbar {
	background: var(--color-background-navbar);
	box-shadow: 0 1px 0 var(--color-stroke);
	height: 4rem;
	left: 0;
	justify-content: space-between;
	padding: 0 1rem;
	position: fixed;
	right: 0;
	z-index: 10;
}

.navbar__links {
	align-items: stretch;
}

.navbar__link {
	border-radius: var(--radius-1);
	color: var(--color-text-primary);
	font-weight: var(--bold-weight);
	padding: 0.5rem 1rem;
	text-decoration: none;
	transition: all 0.15s linear;
	text-wrap: nowrap;
}

	.navbar__link:hover {
		background: var(--color-background-highlight-dark);
		color: var(--color-text-primary-hover);
	}
	
@media screen and (max-width: 1080px) {
	.navbar__link { padding: 0.5rem; }
}

.navbar__mark {
	fill: var(--color-text-primary);
	height: 31px;
	width: 34px;
}

@media screen and (max-width: 1080px) {
	.navbar__mark {
		height: 20px;
		width: 26px;
	}
}

.navbar__logo {
	fill: var(--color-text-primary);
	height: 31px;
	width: 100px;
}

@media screen and (max-width: 1080px) {
	.navbar__logo {
		display: none;
	}
}



.navbar__actions {
}

.navbar__action {
	align-items: center;
	border-radius: var(--radius-1);
	cursor: pointer;
	background: transparent;
	border: 0;
	display: inline-flex;
	padding: 0.65rem 1rem;
}

	.navbar__action:hover {
		background: var(--color-background-highlight-dark);
		color: var(--color-text-primary-hover);
	}
	
	.navbar__action--profile {
		border-radius: var(--radius-max);
		padding: 0.25rem;
	}

.navbar__profile {
	border-radius: var(--radius-max);
	box-shadow: 0 0 0 1px var(--color-stroke);
	height: 2.5rem;
	width: 2.5rem;
}




.find {
	background: transparent;
	border: 1px solid var(--color-button-stroke);
	border-radius: var(--radius-1);
	color: var(--color-text-primary);
	cursor: text;
	font-weight: normal;
	font-size: 1em;
	gap: 1rem;
	margin-right: 0.5rem;
	padding: 0.65rem 1rem;
}

	.find:hover { border-color: var(--color-text-primary); }

@media screen and (max-width: 700px) {
	.find {
		border: 0;
		cursor: pointer;
		margin: 0;
	}
	
	.find:hover {
		background: var(--color-background-highlight-dark);
	}
}


.find__label {}

@media screen and (max-width: 700px) {
	.find__label {
		display: none;
	}
}

.find__btn {
	border: 1px solid var(--color-button-stroke);
	border-bottom-width: 2px;
	border-radius: var(--radius-1);
	padding: 0.125rem 0.5rem;
}

	.find:hover .find__btn { border-color: var(--color-text-primary); }

.find__submit {
	background: transparent;
	border: 0;
	cursor: pointer;
	padding: 0;	
}



.pageheader {
	justify-content: space-between;
	padding: 1rem 0 3rem;
}

.pageheader__title {
	gap: 1rem;
}

.pageheader__logo {
	border-radius: var(--radius-2);
	height: 4rem;
	width: 4rem;
}

.pageheader__actions {
	gap: 0.5rem;
}

.btn__label {}

@media screen and (max-width: 640px) {
	.btn__label { display: none; }
}



.footer {
	font-size: var(--font-s);
	justify-content: space-between;
	padding: 2rem;
}

.footer__block {
	gap: 0.3rem;
}

.footer__block--links { gap: 1rem; }

.footer__logo {
	height: 1.2rem;
	width: 5rem;
}



.tabs {
	background: var(--color-background);
	box-shadow: -2rem 0 0 0 var(--color-background), 2rem 0 0 0 var(--color-background);
	gap: 1rem;
	margin: 1rem 0 3rem 0;
	padding: 0.5rem 0;
	position: sticky;
	top: 4rem;
	z-index: 9;
}

@media screen and (max-width: 640px) {
	.tabs { margin: 1rem 0;}
}

.tabs:after {
	background: var(--color-stroke);
	content: '';
	display: block;
	height: 1px;
	width: 100%;
}

.tabs__container {
	background: var(--color-background-highlight);
	border-radius: var(--radius-max);
	gap: 0.5rem;
	flex-wrap: nowrap;
	padding: 0.15rem;
}

.tabs__item {
	align-items: center;
	background: transparent;
	border: 0;
	border-radius: var(--radius-max);
	cursor: pointer;
	display: inline-flex;
	font-size: 1em;
	font-weight: var(--bold-weight);
	gap: 0.5rem;
	padding: 0.75rem 1.5rem;
	text-wrap: nowrap;
	transition: all 0.15s linear;
}

	.tabs__item:not(.tabs__item--active):hover { 
		background: var(--color-background-highlight-light);
		color: var(--color-text-primary-hover);
	 }

.tabs__item--active {
	background: white;
	box-shadow: var(--shadow);
}





/* LAYOUT OPTION 1 */

.layout {
	display: none;
	column-gap: 2rem;
	grid-template-columns: 1fr 2fr;
}

	@media screen and (max-width: 1080px) {
		.layout--1 {
			column-gap: 1rem;
			grid-template-columns: 3fr 5fr;
		}
	}
	
	@media screen and (max-width: 640px) {
		.layout--1 {
			gap: 3rem;
			grid-template-columns: 1fr;
		}
	}

.layout--active { display: grid; }

.layout--sidebar {
	background: var(--color-background-highlight-light);
	border-radius: var(--radius-2);
	display: flex;
	gap: 0;
	grid-column: 1;
	grid-row: 1;
	flex-direction: column;
}

	.layout--sidebar .block {
		padding: 2rem 1.5rem;
	}
	
		@media screen and (max-width: 1080px) {
			.layout--sidebar .block {
				padding: 1.5rem 1rem; }
		}
	
	.layout--sidebar .block + .block {
		border-top: 1px solid var(--color-stroke);
	}

.layout--main {
	display: flex;
	gap: 3rem;
	grid-column: 2;
	grid-row: 1;
	flex-direction: column;
}
	@media screen and (max-width: 640px) {
		.layout--1 .layout--main {
			grid-column: 1;
			grid-row: 2;
		}
	}




/* LAYOUT OPTION 2 */


.layout--2 {
	grid-template-columns: 2fr 1fr;
}

	@media screen and (max-width: 1080px) {
		.layout--2 {
			column-gap: 1rem;
			grid-template-columns: 5fr 3fr;
		}
	}
	
	@media screen and (max-width: 640px) {
		.layout--2 {
			gap: 3rem;
			grid-template-columns: 1fr;
		}
	}
	
	.layout--2 .layout--main { grid-column: 1; }
	
	@media screen and (max-width: 640px) {
		.layout--2 .layout--main {
			grid-row: 2;
		}
	}
	
	.layout--2 .layout--sidebar { grid-column: 2; }
	
	
	@media screen and (max-width: 640px) {
		.layout--2 .layout--sidebar {
			grid-column: 1;
		}
	}
	
	
	
/* LAYOUT OPTION 3 */


.layout--3 {
	gap: 3rem;
	grid-template-columns: 1fr;
	grid-template-rows: auto auto;
}

	@media screen and (max-width: 1080px) {
		.layout--3 {
			column-gap: 1rem;
			grid-template-columns: 1fr;
		}
	}
	
	@media screen and (max-width: 640px) {
		.layout--3 {
			gap: 3rem;
			grid-template-columns: 1fr;
		}
	}
	
	
	.layout--3 .layout--main {
		grid-column: 1;
		grid-row: 2;
	}
	
		.layout--3 .projects--pinned { grid-template-columns: 1fr 1fr; }
		
		@media screen and (max-width: 640px) {
			.layout--3 .projects--pinned { grid-template-columns: 1fr; }
		}
	
	.layout--3 .layout--sidebar {
		flex-direction: row;
		grid-column: 1;
		grid-row: 1;
		justify-content: stretch;
	}
		
		@media screen and (max-width: 640px) {
			.layout--3 .layout--sidebar {
				flex-direction: column;
			}
		}
		
		.layout--3 .layout--sidebar .block { flex: 1; }
	
		.layout--3 .layout--sidebar .block + .block { border: 0; }

	
	.layout--3 .layout--sidebar .block--3,
	.layout--3 .layout--sidebar .block--4 { display: none; }
	
	.layout--3 .block--widgets,
	.layout--3 .block--widgets-2 {
		display: block;
	}









.block {}

.block__title {
	align-items: center;
	display: flex;
	gap: 0.5rem;
	justify-content: space-between;
}

.block__title--small {
	color: var(--color-text-secondary);
	font-size: var(--font-s);
	padding: 1rem 0 0.5rem 0;
	text-transform: uppercase;
}

.block__description {
	color: var(--color-text-secondary);
	margin-top: 0.25rem;
}

.block__content {
	display: flex;
	flex-direction: column;
}

.block__header + .block__content { margin-top: 1rem; }

.block__content--grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(40%, 1fr));
}

.block__flex {
	flex-direction: row;
	gap: 0.5rem;
}

.block__header {
	flex: 1;
}

.block__content + .block__header { margin-top: 3rem; }


@media screen and (max-width: 640px) {
	.layout--sidebar .block--3,
	.layout--sidebar .block--4 {
		display: none;
	}
}

.block--tight .block__content { padding: 0; } 

.block--widgets,
.block--widgets-2 {
	display: none;
}

	@media screen and (max-width: 640px) {
		.block--widgets,
		.block--widgets-2 {
			display: block;
		}
	}





.row {
	color: var(--color-text-primary);
	padding: 0.5rem 0;
	text-decoration: none;
}

.row__content {
	flex: 1;
}

.row__title {}

	.row:hover .row__title {
		color: var(--color-text-primary-hover);
	}


.row__description {
	color: var(--color-text-secondary);
	font-size: var(--font-s);
	font-weight: normal;
}


.row--notification {
	background: var(--color-background-highlight);
	border-radius: var(--radius-2);
	font-weight: var(--bold-weight);
	gap: 1rem;
	margin-bottom: 0.25rem;
	padding: 1rem;
	transition: all 0.15s linear;
}

	.row--notification:last-child {
		border: 0;
	}

	.row--notification .dismiss { opacity: 0; }
	
	.row--notification:hover {
		color: var(--color-text-primary-hover);
	}
	
	.row--notification:hover .dismiss { opacity: 1; }

.row__icon {
	border-radius: var(--radius-max);
	justify-content: center;
}

.row__icon--warning { background: var(--color-functional-notification); }
.row__icon--error { background: var(--color-functional-error); }
.row__icon--success { background: var(--color-functional-success); }
.row__icon--neutral { box-shadow: 0 0 0 2px var(--color-functional-neutral) inset; }
.row__icon--empty {
	background: transparent;
	border: 1px dashed var(--color-background-highlight-extradark);
	color: var(--color-background-highlight-extradark);
}

	.row__icon--neutral .row__asset { color: var(--color-text-primary); }

.row__asset {
	color: white;
}

.row--empty {
	background: transparent;
	border: 1px solid var(--color-stroke);
	color: var(--color-text-secondary);
	display: none;
}

	.row--empty:hover {
		background: transparent;
		color: var(--color-text-secondary);
	}
	
	
	.block--1.empty .block__content {
		background: transparent;
		box-shadow: 0 0 0 1px var(--color-stroke);
	}
	.block--1.empty .row--empty { display: flex; }


.block__content--statbox {
	align-items: stretch;
	flex-direction: row;
	gap: 0.25rem;
	grid-template-columns: 1fr 1fr;
}

	@media screen and (max-width: 1080px) {
		.block__content--statbox {
			display: grid;
			grid-template-columns: 1fr 1fr 1fr;
		}
	}


.statbox {
	background: var(--color-background-stack);
	border: 1px solid var(--color-stroke);
	border-radius: var(--radius-2);
	color: var(--color-text-primary);
	display: flex;
	flex: 1;
	flex-direction: column;
	gap: 1rem;
	justify-content: space-between;
	padding: 1rem;
	text-decoration: none;
	transition: all 0.15s linear;
}

	.statbox:hover {
		color: var(--color-text-primary-hover);
	}
	
	.statbox:first-child {
	}
	
	.statbox:last-child { box-shadow: none; }


.statbox__number {
	align-items: center;
	gap: 1rem;
	flex: 1;
	justify-content: space-between;
}

	@media screen and (max-width: 1080px) {
		.statbox__number {
			justify-content: flex-start;
		}
	}

.statbox__icon {
	align-items: center;
	background: var(--color-background-highlight);
	border-radius: var(--radius-max);
	display: inline-flex;
	justify-content: center;
	height: 2.5rem;
	transition: all 0.15s linear;
	width: 2.5rem;
}

	.statbox:hover .statbox__icon {
		background: var(--color-background-highlight);
	}

.statbox__description {
	color: var(--color-text-secondary);
	font-size: var(--font-s);
}

.statbox__value {}



.win {
	gap: 1rem;
	margin: 0 0 1rem 0;
}

	.win:last-child { margin: 0; }

.win__emoji {
	background: var(--color-background-card);
	border: 1px solid var(--color-stroke);
	border-radius: var(--radius-max);
	align-items: center;
	display: flex;
	height: 3rem;
	justify-content: center;
	min-height: 3rem;
	min-width: 3rem;
	text-align: center;
	width: 3rem;
}

.win__title {
	font-weight: normal;
	line-height: 1.5;
}


.projects {
	display: grid;
	gap: 1rem;
	grid-template-columns: 1fr 1fr 1fr;
}

	@media screen and (max-width: 1080px) {
		.projects {
			gap: 0.5rem;
			grid-template-columns: 1fr 1fr;
		}
	}
	
	@media screen and (max-width: 480px) {
		.projects {
			grid-template-columns: 1fr;
		}
	}

.projects--pinned {
	grid-template-columns: 1fr;
	margin-bottom: 1rem;
}


.project {
	background: var(--color-background-card);
	border-radius: var(--radius-2);
	box-shadow: var(--shadow);
	display: flex;
	flex-direction: column;
	overflow: hidden;
	transition: all 0.3s ease-out;
}

	.project:hover {
		box-shadow: var(--shadow-hover);
	}



.project--colored:before {
	content: '';
	display: block;
	left: 0;
	height: 0.5rem;
	pointer-events: none;
	position: absolute;
	right: 0;
	top: 0;
	z-index: 1;
}

.project--blue:before { background: var(--color-theme-blue); }
.project--green:before { background: var(--color-theme-green); }
.project--pink:before { background: var(--color-theme-pink); }
.project--yellow:before { background: var(--color-theme-yellow); }

.project--finished {
	border: 2px solid var(--color-functional-success);
}

	.project--finished .project__title {
		padding-right: 2rem;
	}



.project__link {
	color: var(--color-text-primary);
	display: flex;
	flex: 1;
	flex-direction: column;
	padding: 1.5rem;
	text-decoration: none;
}



.projects--pinned .project__link { padding: 1.5rem 2rem; }
.projects--pinned .project--colored .project__link { padding: 2rem 2rem 1.5rem 2rem; }

.projects--pinned .project__title { font-size: 2rem; }

	.project__link:hover .project__title {
		color: var(--color-text-primary-hover);
	}



.project__actions {
	bottom: 1rem;
	display: flex;
	gap: 0.5rem;
	opacity: 0;
	position: absolute;
	right: 1rem;
	transition: all 0.3s ease-out;
	z-index: 8;
}

.project:hover .project__actions,
.project--pinned .project__actions {
	opacity: 1;
}

.project--withactivity .project__actions { bottom: 7rem; }

.project--withactivity-single .project__actions { bottom: 4.5rem; }


.project__action {
	background: var(--color-background-card);
	border: 1px solid var(--color-stroke);
	border-radius: var(--radius-1);
	cursor: pointer;
	padding: 0.5rem;
	transition: all 0.3s ease-out;
}
.project__action:hover { background: var(--color-background-highlight-light); }

.project__actionicon {
	height: 1rem;
	width: 1rem;
}

.project .project__action--pin { border-color: transparent; }
.project:hover .project__action--pin { border-color: var(--color-stroke); }

.project__action--color { opacity: 0; }
.project:hover .project__action--color { opacity: 1; }

.project__meta {
	align-items: start;
	color: var(--color-text-primary);
	flex: 1;
	font-size: var(--font-s);
	gap: 0.25rem;
	padding: 0.25rem 0 0 0;
}


.project__status {
	align-items: center;
	border-radius: var(--radius-min);
	display: inline-flex;
	gap: 0.5rem;
	padding: 0.2rem 0;
	text-wrap: nowrap;
}

/*	.project__status:before {
		border-radius: var(--radius-min);
		content: '';
		display: inline-block;
		height: 0.75rem;
		width: 0.75rem;
	}
	
	.project__status--ontrack:before { background: var(--color-functional-success); }
	.project__status--risk:before { background: var(--color-functional-warning); }
	.project__status--concerned:before { background: var(--color-background); }
*/


.project__status--risk {
	background: var(--color-functional-warning-background);
	box-shadow: 0 0 0 1px var(--color-functional-warning);
	padding: 0.2rem 0.4rem;
}
.project__status--concerned {
	background: var(--color-functional-error);
	color: var(--color-text-on-background);
	padding: 0.2rem 0.4rem;
}


.project__updates {
	display: -webkit-box;
	line-clamp: 1; 
	-webkit-line-clamp: 1;
	-webkit-box-orient: vertical;
	overflow: hidden;
	padding: 0.2rem 0;
	text-overflow: ellipsis;
}

.project__activity {
	height: 1rem;
	fill: transparent;
	width: 1rem;
}

.project__sampletag {
	background: var(--color-functional-neutral);
	border-radius: var(--radius-min);
	box-shadow: 0 0 0 1px var(--color-stroke);
	display: block;
	padding: 0.2rem 0.4rem;
}



.project__contributors {
	height: 1.5rem;
	margin-top: 1rem;
}





.project__notifications {
	border-top: 1px solid var(--color-stroke);
	padding: 0.5rem 1.5rem;
}



.project__notification {
	color: var(--color-text-primary);
	gap: 0.5rem;
	padding: 0.5rem 0;
	text-decoration: none;
}

	.project__notification:hover {
		color: var(--color-text-primary-hover);
	}


.project__complete {
	background: transparent;
	border: 0;
	cursor: pointer;
	font-size: 2rem;
	padding: 0;
	position: absolute;
	right: 1rem;
	top: 1rem;
	transition: all 0.3s ease-out;
}

.project__complete:hover { rotate: -10deg; }

.project__complete:active {
	scale: 0.9;
}

.project__confetti {
	bottom: 0;
	height: 100%;
	left: 0;
	pointer-events: none;
	position: absolute;
	right: 0;
	top: 0;
	width: 100%;
	z-index: 0;
}




.stack {
	background: var(--color-background-stack);
	border: 1px solid var(--color-stroke);
	border-radius: var(--radius-2);
	padding: 0.5rem;
}

.stack__container {}

.stack > .project__actions {
	bottom: auto;
	opacity: 0;
	top: 1rem;
}

	.stack:hover > .project__actions {
		opacity: 1;
	}

.stack__title {
	display: flex;
	gap: 0.5rem;
	padding: 1rem 1.5rem 1rem 1.5rem;
}








.event {
	align-items: start;
	background: var(--color-background-stack);
	border: 1px solid var(--color-stroke);
	border-radius: var(--radius-2);
	flex-direction: column;
	gap: 0.5rem;
	padding: 1rem 1rem 1rem 2rem;
	margin-bottom: 0.25rem;
}

	.event:before {
		background: var(--color-theme-green);
		border-radius: var(--radius-max);
		bottom: 1rem;
		content: '';
		display: block;
		left: 1rem;
		position: absolute;
		top: 1rem;
		width: 0.3rem;
		z-index: 0;
	}

.event__link {
	align-self: stretch;
	color: var(--color-text-primary);
	flex-direction: row;
	flex: 1;
	font-weight: var(--bold-weight);
	justify-content: space-between;
	text-decoration: none;
}

	.event__link:hover .event__title {
		color: var(--color-text-primary-hover);
	}


.event__meta {
	color: var(--color-text-secondary);
	font-size: var(--font-s);
	font-weight: normal;
	gap: 0.5rem;
}


.todo {
	background: var(--color-background-stack);
	border: 1px solid var(--color-stroke);
	border-radius: var(--radius-2);
	gap: 0.75rem;
	padding: 0 0 0 1rem;
	margin-bottom: 0.25rem;
}

.todo--overdue {
}



.todo__check {
	appearance: none;
	border: 2px solid var(--color-text-secondary);
	border-radius: var(--radius-min);
	height: 1.25rem;
	transition: all 0.15s linear;
	width: 1.25rem;
}

	.todo__check:checked {
		background: url("../assets/checkmark.png") no-repeat center center;
		background-size: 100% 100%;
	}

	.todo__check:checked + .todo__link { opacity: 0.5; }

.todo__link {
	color: var(--color-text-primary);
	font-weight: var(--bold-weight);
	flex: 1;
	text-decoration: none;
	padding: 1rem 1rem 1rem 0;
}

	.todo__link:hover .todo__title {
		color: var(--color-text-primary-hover);
	}

.todo__meta {
	color: var(--color-text-secondary);
	font-size: var(--font-s);
	font-weight: normal;
	gap: 0.5rem;
}

	.todo--overdue .todo__meta {
		color: var(--color-functional-error);
	}





/* _________________________________________________________________________ */
/* OVERLAYS */

.dim {
	background: var(--color-text-primary);
	bottom: 0;
	left: 0;
	opacity: 0;
	pointer-events: none;
	position: fixed;
	right: 0;
	transition: all 0.2s ease-out;
	top: 0;
	z-index: 19;
}

.dim--active {
	opacity: 0.7;
	pointer-events: all;
}

.jump {
	background: var(--color-background-jump);
	border: 1px solid var(--color-background-jump-hover);
	border-radius: var(--radius-2);
	color: var(--color-text-on-background);
	display: flex;
	flex-direction: column;
	left: 4rem;
	margin: auto;
	max-width: 60rem;
	opacity: 0;
	padding: 2rem;
	pointer-events: none;
	position: fixed;
	right: 4rem;
	transition: all 0.2s ease-out;
	transform: translate(0, -1rem);
	top: 10rem;
	z-index: 20;
}

	@media screen and (max-width: 640px) {
		.jump {
			left: 1rem;
			right: 1rem;
		}
	}

.jump--active {
	opacity: 1;
	pointer-events: all;
	transform: translate(0, 0);
}

.jump__controls {
	display: flex;
	flex: 1;
	flex-direction: row;
	gap: 0.5rem;
}

.jump__input {
	background: var(--color-background-jump-input);
	border: 1px solid var(--color-input-stroke);
	border-radius: var(--radius-1);
	color: var(--color-text-on-background);
	display: block;
	flex: 1;
	font-size: 1.25rem;
	outline: none;
	padding: 0.75rem;
}

	.jump__input::placeholder {
		color: var(--color-text-jump-placeholder);
	}

.jump__category {
	display: flex;
	flex-direction: column;
	gap: 0.25rem;
}

.jump_categorytitle {
	margin: 2rem 0 0.5rem 0;
	opacity: 0.6;
	text-transform: uppercase;
}

.jump__result {
	color: var(--color-text-on-background);
	border-radius: var(--radius-1);
	gap: 0.5rem;
	padding: 0.75rem;
	text-decoration: none;
}

.jump__result--selected { background: var(--color-background-jump-result); }

.jump__result:hover {
	background: var(--color-background-jump-hover);
	color: var(--color-text-on-background);
}

.jump__value {
	font-weight: var(--bold-weight);
	line-clamp: 1; 
	-webkit-line-clamp: 1;
	-webkit-box-orient: vertical;
	text-overflow: ellipsis;
}

.jump__description { font-weight: normal; }

.jump__filters {
	display: none;
	gap: 0.5rem;
	justify-content: stretch;
	padding: 0.5rem 0;
}

.jump__filters--active { display: flex; }

.jump__filter {
	appearance: none;
	background: var(--color-background-jump-input) url("data:image/svg+xml,<svg width='24' height='24' viewBox='0 0 24 24' fill='white' xmlns='http://www.w3.org/2000/svg'><path d='M12.1924 19.1924L7 14H17.3848L12.1924 19.1924Z'/><path d='M12.1924 6L7 11.1924H17.3848L12.1924 6Z' /></svg>") no-repeat;
	background-position: 95% center;
	border: 1px solid var(--color-input-stroke);
	border-radius: var(--radius-1);
	color: var(--color-text-on-background);
	display: flex;
	flex: 1;
	font-size: 1rem;
	outline: none;
	padding: 0.75rem;
}





.whatsnew {
	background: var(--color-background);
	border-radius: var(--radius-3);
	display: flex;
	flex-direction: column;
	left: 4rem;
	margin: auto;
	max-width: 40rem;
	opacity: 0;
	overflow-x: hidden;
	overflow-y: scroll;
	pointer-events: none;
	position: fixed;
	right: 4rem;
	text-align: center;
	transition: all 0.2s ease-out;
	top: 10rem;
	z-index: 20;
}

	@media screen and (max-width: 640px) {
		.whatsnew {
			left: 1rem;
			right: 1rem;
		}
	}

.whatsnew--active {
	opacity: 1;
	pointer-events: all;
	transform: translate(0, 0);
}

.whatsnew__slidecontainer {
	display: flex;
	flex: 1;
}

.whatsnew__slide {
	display: flex;
	flex: 1;
	flex-direction: column;
	left: 0;
	opacity: 0;
	pointer-events: none;
	position: absolute;
	right: 0;
	transform: translate(2rem, 0);
	transition: all 0.3s ease-out;
}

.whatsnew__slide--placeholder {
	opacity: 0;
	position: static;
	pointer-events: none;
}

.whatsnew--active .whatsnew__slide--active {
	opacity: 1;
	pointer-events: all;
	transform: translate(0, 0);
}

.whatsnew__slide--done {
	transform: translate(-2rem, 0);
}

.whatsnew__image {
	border-bottom: 1px solid var(--color-background-highlight-dark);
	width: 100%;
}

.whatsnew__content {
	display: flex;
	flex: 1;
	flex-direction: column;
	justify-content: center;
	line-height: 1.4;
	padding: 2rem;
}

.whatsnew__title {
	font-size: 2.5rem;
}

.whatsnew__video {
	cursor: pointer;
}

.whatsnew__play {
	align-items: center;
	background: var(--color-text-primary);
	border: 0;
	border-radius: var(--radius-max);
	color: var(--color-text-on-background);
	cursor: pointer;
	display: flex;
	height: 5rem;
	justify-content: center;
	left: 0;
	margin: auto;
	position: absolute;
	right: 0;
	top: 45%;
	transition: all 0.15s ease-out;
	width: 5rem;
	z-index: 30;
}

	.whatsnew__video:hover .whatsnew__play {
		scale: 1.2;
	}
	
.whatsnew__youtube {
	bottom: 0;
	left: 0;
	opacity: 0;
	pointer-events: none;
	position: absolute;
	right: 0;
	top: 0;
	z-index: -1;
}

.whatsnew--active .whatsnew__youtube--play {
	opacity: 1;
	pointer-events: all;
	z-index: 40;
}

.whatsnew__footer {
	align-items: center;
	background: var(--color-background);
	border-top: 1px solid var(--color-stroke);
	display: flex;
	justify-content: space-between;
	padding: 1rem;
}

.pagers {
	display: flex;
	gap: 0.5rem;
}

.pager {
	cursor: pointer;
}

	.pager:before {
		background: var(--color-button-stroke);
		border-radius: var(--radius-max);
		content: '';
		display: block;
		height: 0.75rem;
		transition: all 0.3s ease-out;
		width: 0.75rem;
	}
	
	.pager--active:before {
		background: var(--color-text-primary);
	}



.customise {
	background: var(--color-background);
	border-radius: var(--radius-3);
	display: flex;
	flex-direction: column;
	left: 4rem;
	margin: auto;
	max-width: 50rem;
	opacity: 0;
	overflow: scroll;
	padding: 4rem;
	pointer-events: none;
	position: fixed;
	right: 4rem;
	text-align: center;
	transform: translate(0, -2rem);
	transition: all 0.2s ease-out;
	top: 10rem;
	z-index: 20;
}

	@media screen and (max-width: 640px) {
		.customise {
			left: 1rem;
			right: 1rem;
		}
	}

.customise--active {
	opacity: 1;
	pointer-events: all;
	transform: translate(0, 0);
}

.customise__title { margin-bottom: 0.5rem; }

.customise__options {
	display: flex;
	flex-direction: row;
	gap: 2rem;
	justify-content: stretch;
	margin: 2rem 0;
}

	@media screen and (max-width: 640px) {
		.customise__options {
			flex-direction: column;
			gap: 1rem;
		}
	}

.customise__option {
	align-items: center;
	box-shadow: 0 0 0 2px var(--color-stroke);
	border-radius: var(--radius-2);
	cursor: pointer;
	display: flex;
	flex: 1;
	flex-direction: column;
	padding: 1rem;
	transition: all 0.15s linear;
}
	
	@media screen and (max-width: 640px) {
		.customise__option {
			align-items: center;
			flex-direction: row;
			gap: 1rem;
			padding: 0.5rem 1rem;
			text-align: left;
		}
	}

.customise__layout {
	height: 10rem;
	width: 10rem;
}

	@media screen and (max-width: 1080px) {
		.customise__layout {
			height: 8rem;
			width: 8rem;
		}
	}

	@media screen and (max-width: 640px) {
		.customise__layout {
			height: 4rem;
			width: 4rem;
		}
	}

.customise__radio { display: none; }

	.customise__radio:checked + .customise__option {
		box-shadow: 0 0 0 4px var(--color-background-button);
	}

.customise__description {
	color: var(--color-text-secondary);
	font-size: var(--font-s);
}


.desktoponly {}

	@media screen and (max-width: 640px) {
		.desktoponly { display: none !important; }
	}





.index {
	font-size: 1.15rem;
	line-height: 1.5;
	padding: 4rem 2rem;
}

	@media screen and (max-width: 640px) {
		.index { padding: 2rem 1rem; }
	}

.index__page {
	background: var(--color-background-card);
	border-radius: var(--radius-2);
	box-shadow: var(--shadow);
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
	margin: auto;
	padding: 3rem 8rem;
	max-width: 65rem;
}

	@media screen and (max-width: 1080px) {
		.index__page { padding: 3rem 6rem; }
	}

	@media screen and (max-width: 640px) {
		.index__page { padding: 2rem 2rem; }
	}

.index__head {
	align-items: center;
	display: flex;
	flex-direction: column;
	gap: 1rem;
	margin: 0 0 2rem 0;
}

.index__title {
	align-items: center;
	display: flex;
	flex-direction: column;
	gap: 1rem;
	text-align: center;
}

	.index__title:after {
		background: var(--color-stroke);
		content: '';
		display: block;
		height: 1px;
		width: 10rem;
	}

.index__meta {
	gap: 0.5rem;
}

.index__heading {
	margin: 1rem 0 0 0;
}

.index__tip {
	align-self: flex-start;
	background: var(--color-functional-info-background);
	border-radius: var(--radius-1);
	font-size: 0.9rem;
	margin-top: 1rem;
	padding: 0.5rem 1rem;
}

.index__prototypes {
	align-items: center;
	background: var(--color-background-highlight);
	border: 1px solid var(--color-stroke);
	border-radius: var(--radius-2);
	display: flex;
	gap: 2rem;
	justify-content: center;
	margin: 2rem 0;
	padding: 1rem;
}

	@media screen and (max-width: 1080px) {
		.index__prototypes {
			gap: 1rem;
		}
	}

	@media screen and (max-width: 640px) {
		.index__prototypes {
			flex-direction: column;
		}
	}

.index__prototypes .btn {
	flex: 1;
	justify-content: center;
}

.index__signature {
	margin-top: 2rem;
	max-width: 12rem;
}

.index__z {
	font-size: 0.9rem;
	font-style: italic;
}