body {
	/*  Timeline */
	--kompassi-schedule-timeline-row-padding: 0.2em;
	--kompassi-schedule-timeline-row-height: calc( var(--kompassi-line-height) + var(--kompassi-schedule-timeline-row-padding) * 3 );

	/*  Timetable  */
	--kompassi-schedule-timetable-time-width: 50px;
	--kompassi-schedule-timetable-group-min-width: 200px;
	--kompassi-schedule-timetable-program-padding: 0.3em;

	/*  Defaults  */
	--kompassi-program-color-default: var(--kompassi-palette-2);
	--kompassi-program-icon-default: url("../images/kompassi_white.svg");
	--kompassi-dimension-color-default: #222;
}

/* Dark mode */
@media (prefers-color-scheme: dark) {
	body:not(.kompassi-color-scheme-light) {
		--kompassi-dimension-color-default: #444;
	}
	body:not(.kompassi-color-scheme-light) #kompassi_schedule article::before,
	body:not(.kompassi-color-scheme-light) #kompassi_schedule[data-display="timeline"] article {
		filter: brightness(90%);
	}
	body:not(.kompassi-color-scheme-light) #kompassi_modal.kompassi-program .content .actions::after {
		filter: brightness(50%);
	}
	body:not(.kompassi-color-scheme-light) #kompassi_schedule_dates a.date-toggle.current::before {
		background-color: var(--kompassi-fg);
		filter: opacity(0.6);
	}
	body:not(.kompassi-color-scheme-light) #kompassi_schedule_dates a.date-toggle.current::after {
		background-color: var(--kompassi-bg);
	}
}

body.kompassi-color-scheme-dark {
	--kompassi-dimension-color-default: #444;
}
body.kompassi-color-scheme-dark #kompassi_schedule article::before,
body.kompassi-color-scheme-dark #kompassi_schedule[data-display="timeline"] article {
	filter: brightness(90%);
}
body.kompassi-color-scheme-dark #kompassi_modal.kompassi-program .content .actions::after {
	filter: brightness(50%);
}
body.kompassi-color-scheme-dark #kompassi_schedule_dates a.date-toggle.current::before {
	background-color: var(--kompassi-fg);
	filter: opacity(0.6);
}
body.kompassi-color-scheme-dark #kompassi_schedule_dates a.date-toggle.current::after {
	background-color: var(--kompassi-bg);
}

/* Icon opacities */
article:not(.is-favorite) .kompassi-icon-favorite::before { opacity: 0.5; }


#kompassi_block_schedule,
#kompassi_block_schedule * {
	line-height: var(--kompassi-line-height);
}

/*
 *  Toolbar
 *
 */

#kompassi_schedule_toolbar {
	position: relative;
	display: grid;
	width: 100%;
	margin-bottom: var(--kompassi-padding);
	grid-gap: var(--kompassi-padding);
	grid-template-areas: "dates filtering" "display display" "more more";
	grid-template-columns: max-content max-content;
	justify-content: space-between;

	.kompassi-button-group {
		margin: 0;
	}

	> section {
		align-content: center;

		&#kompassi_schedule_dates { grid-area: dates; }
		&#kompassi_schedule_filtering { grid-area: filtering; }
		&#kompassi_schedule_display { grid-area: display; }
		&#kompassi_schedule_more { grid-area: more; }
	}

	@container kompassi-integration (width < 475px) {
		#kompassi_schedule_display {
			display: flex;

			> a {
				flex-grow: 1;
			}
		}
	}

	@container kompassi-integration (width >= 475px) {
		grid-template-areas: "dates display display" "filtering filtering more";
		grid-template-columns: auto auto;

		#kompassi_schedule_display { text-align: right; }

		#kompassi_schedule_more {
			#kompassi_schedule_more_actions {
				align-self: end;
				ul { right: 0; }

				&.open .kompassi-dropdown-menu-items {
					border-top-left-radius: var(--kompassi-radius);
					border-top-right-radius: 0;
				}
			}
		}
	}

	@container kompassi-integration (width >= 800px) {
		grid-template-areas: "dates filtering display more";
		grid-template-columns: max-content max-content auto max-content;
		justify-content: unset;
	}
}

/*
 *  Date filters
 *
 */

#kompassi_schedule_dates {
	.date-toggle.current {
		position: relative;
		z-index: 3;

		&::before,
		&::after {
			content: '';
			display: block;
			position: absolute;
		}

		&::before {
			height: 0.75em;
			width: 0.75em;
			top: 0;
			right: -1px;
			background-color: var(--kompassi-palette-2);
			z-index: -2;
			filter: opacity(0.8);
		}

		&::after {
			transform: rotate(45deg);
			height: 1.25em;
			width: 1.25em;
			top: calc(0.75em / 4 + 1px);
			right: calc(0.75em / 4);
			z-index: -1;
			background-color: var(--kompassi-bg);
		}

		&.active {
			&::before {
				background-color: var(--kompassi-bg);
			}
			&::after {
				background-color: var(--kompassi-palette-2);
			}
		}
	}
}

/*
 *  Filters
 *
 */

#kompassi_schedule_filters {
	position: relative;
	display: none;
	margin-bottom: var(--kompassi-padding);
	color: #fff;
	background-color: var(--kompassi-palette-2);
	padding: var(--kompassi-padding);
	border-radius: var(--kompassi-radius);
	box-shadow: var(--kompassi-box-shadow);

	> *:not(:last-child) {
		margin-bottom: var(--kompassi-padding);
	}

	> [class*="kompassi-icon"]::before {
		filter: invert();
	}

	> .input > input {
		width: calc(100% - var(--kompassi-padding) * 2);
		box-sizing: content-box;
	}

	> .select > * {
		display: inline-block;
		width: 100%;
	}

	:is(input, button) {
		padding: var(--kompassi-padding);
		color: #fff;
		background-color: hsla(0deg, 0%, 0%, 20%);
		border: none;
		border-radius: var(--kompassi-radius);
		font-family: var(--kompassi-font);
		font-size: 100%;
	}

	input {
		&::placeholder {
			color: #fff;
		}
	}

	button {
		padding: var(--kompassi-padding) calc(var(--kompassi-padding) + var(--kompassi-icon-size)) var(--kompassi-padding) var(--kompassi-padding);
		outline-color: #fff;
	}

	option {
		color: var(--kompassi-fg);
		background-color: var(--kompassi-bg);
	}

	input:not(:placeholder-shown),
	.kompassi-dropdown button.active {
		color: #222;
		background-color: hsl(0deg, 0%, 100%, 80%);
	}

	.kompassi-dropdown button.active::after {
		filter: none;
	}

	.clear-filters {
		display: none;
		position: absolute;
		bottom: var(--kompassi-padding);
		left: var(--kompassi-padding);
		height: 1.5em;
		width: 100%;
	}

	&.visible {
		display: block;

		&.has-filters-enabled {
			padding-bottom: calc(1.5em + var(--kompassi-padding) * 2);

			.clear-filters {
				display: block;

				&::before {
					height: 100%;
				}
			}
		}
	}

	@container kompassi-integration (width >= 700px) {
		.clear-filters {
			left: unset;
			bottom: unset;
			top: var(--kompassi-padding);
			right: var(--kompassi-padding);
			width: 1.5em;
			height: calc( 100% - var(--kompassi-padding) * 2 );

			&::before {
				width: 100%;
				margin-right: 0;
			}
		}

		&.visible {
			display: grid;
			grid-template-columns: repeat(var(--kompassi-schedule-filters-columns, 4), minmax(0, 1fr));
			grid-gap: var(--kompassi-padding);

			> *:not(.clear-filters),
			> .select > * {
				margin-right: 0;
				margin-bottom: 0;
				width: 100%;
				max-width: 100%;
			}

			&.has-filters-enabled {
				padding-right: calc( 1.5em + var(--kompassi-padding) * 2 );
				padding-bottom: var(--kompassi-padding);

				.clear-filters::after {
					display: none;
				}
			}
		}
	}
}

/*
 *  Schedule
 *
 */

/* TODO */
summary {
	list-style: none;

	&::marker {
		display: none;
	}
}

.kompassi-schedule-wrapper {
	width: calc( 100% - 0.2em );
	padding: 0.2em;
	overflow: hidden;
	user-select: none;
	position: relative;
}

#kompassi_schedule {
	article {
		&:hover {
			cursor: pointer;
		}
		&.filtered {
			display: none !important;
		}
		&::before {
			background-image: var(--kompassi-program-icon, var(--kompassi-program-icon-default));
			background-size: auto calc( 100% - 3em );
			background-position: 1.5em 50%;
			background-repeat: no-repeat;
		}

		.title {
			font-weight: bold;
			letter-spacing: 0.04em;
		}

		.actions {
			> a {
				margin-right: var(--kompassi-padding);
			}

			> ::before {
				content: '';
				display: inline-block;
				width: var(--kompassi-icon-size);
				height: var(--kompassi-icon-size);
				background-position: 50% 50%;
				background-repeat: no-repeat;
				background-size: contain;

				padding: 0;
				margin: 0;
				transition: 100ms all;
			}

			> .favorite:hover::before {
				margin: -2px;
				padding: 2px;
			}
		}

		.times {
			span {
				white-space: nowrap;
			}
		}

		summary {
			outline: none;
		}

		.main {
			background-color: var(--kompassi-palette-5);
		}
	}
}

/* TODO */
:is(#kompassi_schedule article, #kompassi_modal) {
	dl {
		margin: var(--kompassi-padding-large) 0 0 0;
		padding-top: var(--kompassi-padding-large);
		border-top: 1px solid var(--kompassi-fg-25);

		dt, dd {
			font-size: 90%;
		}

		dt {
			font-weight: bold;
		}

		/* TODO: Prefer container query */
		@media screen and (width >= 800px) {
			display: grid;
			grid-template-columns: max-content auto;
			grid-gap: 0 2em;
		}
	}

	.times .length {
		font-size: max(85%, 8pt);
		text-transform: none;
		color: var(--kompassi-fg-50);
		margin-left: 0.4em;
	}
}

/*  TODO: Canceled programs  */
#kompassi_schedule article[data-iscanceled="true"] {
	--kompassi-program-color: #ddd !important;
	color: #777 !important;
}
	#kompassi_modal[data-iscanceled="true"] .title::before,
	#kompassi_schedule article[data-iscanceled="true"] .title::before {
		display: inline-block;
		margin-right: 0.5em;
		content: var(--kompassi-string-canceled-program, "Canceled" );
		color: red;
		font-style: oblique;
		text-transform: uppercase;
	}

/*  TODO: Programs continuing  */
#kompassi_schedule:not([data-display="timeline"]) article.continues {
	order: 100001 !important;
}
#kompassi_schedule[data-display="timeline"].now article.continues {
/*	opacity: 0.5; */
/*	background-image: linear-gradient( to bottom, hsl(0,0%,60%), hsl(0,0%,75%) ); */
}

#kompassi_schedule:not([data-display="timeline"]) #kompassi_programs_continuing {
	order: 10000;
}
	#kompassi_schedule[data-display="timeline"] #kompassi_programs_continuing {
		display: none;
	}

/*  Display Style: List  */
#kompassi_schedule[data-display="list"] {
	--kompassi-program-list-padding: 0.3em;
	--kompassi-program-list-visual-width: 12px;

	display: grid;
	grid-template-columns: repeat(1,1fr);
	grid-gap: var(--kompassi-padding);

	article {
		position: relative;
		min-width: 240px;
		padding-left: calc( var(--kompassi-program-list-visual-width) );
		color: var(--kompassi-fg);
		background-color: var(--kompassi-bg);
		box-shadow: var(--kompassi-box-shadow);
		border-radius: var(--kompassi-radius);

		&::before {
			content: '';
			position: absolute;
			display: block;
			width: var(--kompassi-program-list-visual-width);
			top: 0;
			bottom: 0;
			left: 0;
			background-color: var(--kompassi-program-color, var(--kompassi-program-color-default));
			background-size: 65% calc( 100% - var(--kompassi-padding) * 2 );
			background-position: 50% 50%;
			border-top-left-radius: var(--kompassi-radius);
			border-bottom-left-radius: var(--kompassi-radius);

			@media screen and (width < 600px) {
				--kompassi-program-icon: none;
			}
		}

		summary {
			display: grid;
			grid-template-columns: 1fr min-content;
			grid-template-areas: "title actions" "secondary secondary";
			padding: var(--kompassi-padding);

			.favorite::before {
				margin-right: 0;
			}
		}

		.title {
			text-wrap: nowrap;
			text-overflow: ellipsis;
			overflow: hidden;
		}

		section {
			border-top: 1px solid var(--kompassi-fg-10);

			> * {
				padding: 0 var(--kompassi-padding);
				margin-bottom: var(--kompassi-padding);
			}

			.main {
				padding: var(--kompassi-padding);
			}

			.meta {
				&:has(+ .actions) {
					margin-bottom: 0;
				}

				.in-summary {
					display: none;
				}
			}

			.actions {
				> a::before {
					content: unset;
				}
				> a::after {
					content: attr(title);
				}
			}
		}
	}

	/*  TODO: Prefer container queries  */
	@media screen and (width >= 600px) {
		--kompassi-program-list-padding: 0.6em;
		--kompassi-program-list-visual-width: 5.5em;
		display: grid;

		article {
			padding-left: var(--kompassi-program-list-visual-width);
			margin-bottom: 0;
			grid-template-columns: 50% auto auto;
			grid-template-areas:
			"title title actions"
			"meta meta meta";
		}
	}

	@media screen and (width >= 640px) {
		article summary .secondary {
			display: flex;
			justify-content: space-between;

			> :last-child {
				text-align: right;
			}
		}
	}
}


/*  Display Style: Timeline  */
#kompassi_schedule[data-display="timeline"] {
	position: relative;
	color: var(--kompassi-fg);
	background-color: var(--kompassi-bg);
	overflow: hidden;
	box-shadow: var(--kompassi-box-shadow);
	border-radius: var(--kompassi-radius);

	.headers {
		position: absolute;
		top: 0;
		z-index: 10000;
		width: 100%;
		height: calc(var(--kompassi-schedule-timeline-row-height) * 2);
		background-color: var(--kompassi-bg);
	}
	.hint {
		position: absolute;
		padding: var(--kompassi-schedule-timeline-row-padding);
		background-color: var(--kompassi-bg);
		overflow: hidden;

		&.day-hint {
			width: 100%;
		}
		&.time-hint {
			top: var(--kompassi-schedule-timeline-row-height);
		}
	}

	&.sticky {
		z-index: 10;
		box-shadow: var(--kompassi-box-shadow);

		&.hint.time-hint {
			border-left: 1px solid var(--kompassi-fg-10);
			border-top: 1px solid var(--kompassi-fg-10);
		}
	}

	.ruler {
		width: auto;
		height: 100%;
		border-top: 1px solid var(--kompassi-fg-10);
		border-left: 1px solid var(--kompassi-fg-10);
		padding: 3px;
		color: var(--kompassi-schedule-fg-50);
		position: absolute;
		top: 0;
		bottom: 0;

		&:first-of-type {
			border-left-color: transparent;
		}
	}

	:is(.group-name, article) {
		padding: var(--kompassi-schedule-timeline-row-padding);
		position: absolute;
	}

	.group-name {
		display: block;
		color: var(--kompassi-fg);
		background-color: var(--kompassi-palette-4);
		border-radius: var(--kompassi-radius);
		position: absolute;
		left: 3px;
		right: 3px;
		z-index: 3;
		margin: 0;
	}

	article {
		position: relative;
		order: 1 !important;
		display: inline-block;
		background-color: var(--kompassi-program-color,var(--kompassi-program-color-default));
		background-image: linear-gradient(to bottom,rgba(0, 0, 0, 25%),rgba(0, 0, 0, 15%));
		color: oklch(from var(--kompassi-program-color,var(--kompassi-program-color-default)) calc((var(--kompassi-lightness-threshold) - l) * 1000) 0 0);

		z-index: 5;
		white-space: nowrap;
		overflow: hidden;

		section {
			display: none;
		}

		summary :is(.favorite, .secondary) {
			display: none;
		}

		&.is-favorite {
			.title {
				position: relative;
				padding-left: calc( 1em + 8px );

				&::after {
					position: absolute;
					display: inline-block;
					content: '';
					left: 4px;
					top: 2px;
					bottom: 2px;
					width: 1em;
					background-size: contain;
					background-position: 50% 50%;
					background-repeat: no-repeat;
				}
			}
		}

		&:hover {
			margin-top: -2px;
			box-shadow: 0 0 1em rgba(0, 0, 0, 20%);
			text-shadow: 0.05em 0.05em 0.1em rgba(0, 0, 0, 80%);
			filter: brightness(1.25);
			min-width: min-content !important;
			z-index: 2000;
		}

		.title {
			display: block;
		}

		&.continues {
			.title::before {
				content: '';
				display: block;
				float: left;
				width: var(--kompassi-line-height);
				height: var(--kompassi-line-height);
				margin-left: calc(-1 * var(--kompassi-schedule-timeline-row-padding));
				margin-right: var(--kompassi-schedule-timeline-row-padding);
				background: transparent url("../images/icons/arrow_left.svg");
				background-size: contain;
				background-repeat: no-repeat;
				filter: invert();
			}

			&.is-favorite {
				.title::before {
					margin-left: calc(-1 * ( var(--kompassi-schedule-timeline-row-padding) * 2 ) - (1em + 4px));
					margin-right: calc(var(--kompassi-schedule-timeline-row-padding) + (1em + 4px));
				}

				.title::after {
					left: calc(4px + 1em);
				}
			}
		}
	}
}

/*  Display Style: Timetable  */
#kompassi_schedule[data-display="timetable"] {
	.table-wrapper {
		margin-bottom: calc( var(--kompassi-padding) * 2);
	}

	.table-toolbar {
		display: grid;
		grid-template-columns: auto max-content;
	}

	.table-controls {
		--kompassi-padding: 0.2em;
		--kompassi-icon-size: 16px;
		text-align: right;

		a {
			box-sizing: content-box;

			&:not(.active) {
				cursor: not-allowed;
			}
		}
	}

	.kompassi-integration.has-dark-background & .kompassi-subheading {
		color: var(--kompassi-fg-invert);
	}

	.table {
		position: relative;
		display: grid;
		grid-gap: 0 var(--kompassi-padding);
		grid-template-rows: 2em;
		margin: var(--kompassi-padding) 0;
		padding: 0 var(--kompassi-padding) 0 0;
		background-color: var(--kompassi-bg);
		box-shadow: var(--kompassi-box-shadow);
		border-radius: var(--kompassi-radius);
		overflow-x: scroll;

		scroll-snap-type: x proximity;

		&::before,
		&::after {
			position: absolute;
			display: block;
			height: 100%;
			width: 40px;
			z-index: 4000;
		}

		&.can-scroll-left {
			&::before {
				content: '';
				left: var(--kompassi-schedule-timetable-time-width);
				background-image: radial-gradient(farthest-side at 0% 50%, rgba(0, 0, 0, 20%), rgba(0, 0, 0, 0%));
			}
		}

		&.can-scroll-right {
			&::after {
				content: '';
				right: 0;
				background-image: radial-gradient(farthest-side at 100% 50%, rgba(0, 0, 0, 20%), rgba(0, 0, 0, 0%));
			}
		}

		.heading {
			padding: var(--kompassi-schedule-timetable-program-padding);
			font-weight: 600;
		}

		.time {
			position: sticky;
			left: 0;
			z-index: 10;
			padding: var(--kompassi-schedule-timetable-program-padding);
			white-space: nowrap;

			&.time-hour {
				font-weight: 600;

				&:not(.first)::before {
					content: '';
					display: block;
					position: absolute;
					top: 0;
					left: 0;
					height: 1px;
					width: 100%;
					background-color: var(--kompassi-fg-25);
				}
			}
			&.time-minute {
				/* TODO */
				z-index: 11;
				border-top: 1px solid var(--kompassi-fg-75);
				opacity: 0.4;
				text-align: right;

				em {
					font-size: max(8pt, 80%);
				}
			}
		}

		.time-bar {
			border-top: 1px solid var(--kompassi-fg-25);
			margin: 0 calc(-1 * var(--kompassi-padding));
			scroll-snap-align: start;

			&.first {
				border-top: none;
			}

			&:last-child {
				border-bottom-right-radius: var(--kompassi-radius);
				border-bottom-left-radius: var(--kompassi-radius);
			}
		}

		.time-odd {
			background-color: var(--kompassi-bg);
		}
		.time-even {
			background-color: #f2f2f2; /* TODO */
		}
	}

	article {
		margin-top: 6px;
		margin-bottom: 6px;
		padding: var(--kompassi-schedule-timetable-program-padding);
		background-color: var(--kompassi-program-color,var(--kompassi-program-color-default));
		background-image: linear-gradient(to bottom,rgba(0, 0, 0, 25%),rgba(0, 0, 0, 15%));
		color: oklch(from var(--kompassi-program-color,var(--kompassi-program-color-default)) calc((var(--kompassi-lightness-threshold) - l) * 1000) 0 0);
		box-shadow: var(--kompassi-box-shadow);
		z-index: 2;
		scroll-snap-align: start;

		section {
			display: none;
		}

		details {
			height: 100%;
		}

		summary {
			height: 100%;
			display: grid;
			grid-template-areas: "title" "favorite";
		}

		.title {
			word-wrap: anywhere;
		}

		.favorite {
			align-self: end;
			justify-self: end;
		}

		.kompassi-icon-favorite::before {
			margin-right: 0;
		}

		.secondary {
			display: none;
		}

		&:hover {
			filter: brightness(1.25);
			z-index: 2000;

			&:not([data-iscanceled="true"]) {
				text-shadow: 0.05em 0.05em 0.1em rgba(0, 0, 0, 80%);
			}
		}
	}
}


/*
 *  Modals
 *
 */

/*  Program  */

#kompassi_modal.kompassi-program {
	.content {
		.actions {
			position: relative;

			> *,
			&::before {
				position: relative;
				z-index: 2;
			}

			&::before {
				content: ' ';
				display: block;
				position: absolute;
				top: 0;
				right: var(--kompassi-padding-large);

				height: calc(100% + var(--kompassi-padding) * 2);
				width: calc(var(--kompassi-icon-size) + var(--kompassi-padding-large) * 2);

				margin-top: calc(-1 * var(--kompassi-padding));
				margin-right: calc(-1 * var(--kompassi-padding-large));
				margin-left: var(--kompassi-padding);

				background-image: var(--kompassi-program-icon, var(--kompassi-program-icon-default));
				background-size: calc(var(--kompassi-icon-size) * 1.5);
				background-repeat: no-repeat;
				background-position: 50% 50%;
			}

			&::after {
				content: '';
				position: absolute;
				z-index: 1;

				top: 0;
				right: 0;
				bottom: 0;
				left: 0;
				background-color: var(--kompassi-program-color, var(--kompassi-program-color-default));
				filter: brightness(90%);
			}
		}

		.main {
			justify-content: space-between;
		}
	}

	.footer {
		> :not(.dimension) {
			display: block;
			margin-bottom: 0.3em;
		}
	}

	/* TODO: Prefer container query */
	@media screen and (width < 600px) {
		> .content > .actions {
			padding-right: calc(var(--kompassi-icon-size) + var(--kompassi-padding-large) * 2);
		}
	}
}

#kompassi_modal.kompassi-legend {
	dl.dimension-colors {
		display: grid;
		grid-template-columns: 2em auto;
		grid-gap: 0 1em;

		dt span {
			width: 100%;
			height: var(--kompassi-line-height);
			display: inline-block;
		}

		dd {
			margin-left: 0;
		}
	}
}

/* TODO */
#kompassi_modal .program-title-list li::before {
	display: inline-block;
	width: 1.25em;
	content: "–";
}


/*
 *  Annotations
 *
 */


/*
 *  Dimensions
 *
 */

.kompassi-dimensions {
	margin-top: var(--kompassi-padding);

	.dimension {
		display: inline;
		cursor: help;

		&:empty {
			display: none;
		}

		.value {
			display: inline-block;
			max-width: 100%;
			padding: 0.2em 0.6em;
			margin-right: 0.5em;
			margin-bottom: 0.5em;
			background-color: var(--kompassi-dimension-color,var(--kompassi-dimension-color-default));
			color: #fff;
			border-radius: 9999px;
			overflow-wrap: break-word;
			line-height: 1.2em;
		}
	}
}

/*
 *  Current time indicator
 *
 */

#kompassi_schedule .current-time {
	position: absolute;
	display: block;
	height: 100%;
	width: 1px;
	border-right: 1px dashed var(--kompassi-indicator-bg);
	z-index: 4;
}