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;
}

@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; }

/*
 *  Toolbar
 *
 */

#kompassi_schedule_toolbar {
	position: relative;
}

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

#kompassi_schedule_toolbar {
	display: grid;
	margin-bottom: var(--kompassi-padding);
	grid-gap: var(--kompassi-padding);
	grid-template-areas: "dates dates" "filtering filtering" "menu display";
	grid-template-columns: min-content auto;
}
	#kompassi_schedule_toolbar section { align-content: center; }
	#kompassi_schedule_toolbar #kompassi_schedule_dates { grid-area: dates; }
	#kompassi_schedule_toolbar #kompassi_schedule_filtering { grid-area: filtering; }
	#kompassi_schedule_toolbar #kompassi_schedule_menu { grid-area: menu; position: relative; }
	#kompassi_schedule_toolbar #kompassi_schedule_display { grid-area: display; }

@container kompassi-integration (min-width:450px) {
	#kompassi_schedule_toolbar {
		grid-template-areas: "dates display" "filtering menu";
		grid-template-columns: auto auto;
	}
		#kompassi_schedule_toolbar #kompassi_schedule_menu { justify-self: end; }
			#kompassi_schedule_toolbar #kompassi_schedule_menu.open .kompassi-dropdown-menu-items {
				border-top-left-radius: var(--kompassi-radius);
				border-top-right-radius: 0;
			}
			#kompassi_schedule_toolbar #kompassi_schedule_menu ul {
				right: 0;
			}
		#kompassi_schedule_toolbar #kompassi_schedule_display { text-align: right; }
}

@container kompassi-integration (min-width:700px) {
	#kompassi_schedule_toolbar {
		grid-template-areas: "dates filtering menu display";
		grid-template-columns: max-content max-content auto max-content;
	}
}

/*
 *  Date filters
 *
 */

#kompassi_schedule_dates .date-toggle.current {
	position: relative;
	z-index: 3;
}
	#kompassi_schedule_dates .date-toggle.current::before,
	#kompassi_schedule_dates .date-toggle.current::after {
		content: '';
		display: block;
		position: absolute;
	}
		#kompassi_schedule_dates .date-toggle.current::before {
			height: 0.75em;
			width: 0.75em;
			top: 0;
			right: -1px;
			background-color: var(--kompassi-palette-2);
			z-index: -2;
			filter: opacity(0.8);
		}
			#kompassi_schedule_dates .date-toggle.current.active::before {
				background-color: var(--kompassi-bg);
			}
		#kompassi_schedule_dates .date-toggle.current::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);
		}
			#kompassi_schedule_dates .date-toggle.current.active::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);
}
	#kompassi_schedule_filters.visible {
		display: block;
	}
		#kompassi_schedule_filters > [class*="kompassi-icon"]::before {
			filter: invert();
		}
		#kompassi_schedule_filters > .input > input {
			width: calc(100% - var(--kompassi-padding) * 2);
			box-sizing: content-box;
		}
		#kompassi_schedule_filters > .select > * {
			display: inline-block;
			width: 100%;
		}
			#kompassi_schedule_filters :is(input, button) {
				padding: var(--kompassi-padding);
				color: #fff;
				background-color: hsl(0,0%,0%,0.2);
				border: none;
				border-radius: var(--kompassi-radius);
				font-family: var(--kompassi-font);
				font-size: 100%;
			}
				#kompassi_schedule_filters input::placeholder {
					color: #fff;
				}
				#kompassi_schedule_filters button {
					padding: var(--kompassi-padding) calc(var(--kompassi-padding) + var(--kompassi-icon-size)) var(--kompassi-padding) var(--kompassi-padding);
					outline-color: #fff;
				}
					#kompassi_schedule_filters option {
						color: var(--kompassi-fg);
						background-color: var(--kompassi-bg);
					}
				#kompassi_schedule_filters input:not(:placeholder-shown),
				#kompassi_schedule_filters .kompassi-dropdown button.active {
					color: #222;
					background-color: hsl(0,0%,100%,80%);
				}
					#kompassi_schedule_filters .kompassi-dropdown button.active::after {
						filter: none;
					}

	#kompassi_schedule_filters.visible.has-filters-enabled {
		padding-bottom: calc( 1.5em + var(--kompassi-padding) * 2 );
	}
			#kompassi_schedule_filters .clear-filters {
				display: none;
				position: absolute;
				bottom: var(--kompassi-padding);
				left: var(--kompassi-padding);
				height: 1.5em;
				width: 100%;
			}
				#kompassi_schedule_filters.visible.has-filters-enabled .clear-filters {
					display: block;
				}
				#kompassi_schedule_filters.visible.has-filters-enabled .clear-filters::before {
					height: 100%;
				}

@container kompassi-integration (min-width: 700px) {
	#kompassi_schedule_filters.visible {
		display: grid;
		grid-template-columns: repeat(var(--kompassi-schedule-filters-columns, 4), minmax(0, 1fr));
		grid-gap: var(--kompassi-padding);
	}
		#kompassi_schedule_filters.visible > *,
		#kompassi_schedule_filters.visible > .select > * {
			margin-right: 0;
			margin-bottom: 0;
			width: 100%;
			max-width: 100%;
		}
	#kompassi_schedule_filters.visible.has-filters-enabled {
		padding-right: calc( 1.5em + var(--kompassi-padding) * 2 );
		padding-bottom: var(--kompassi-padding);
	}
		#kompassi_schedule_filters .clear-filters {
			left: unset;
			bottom: unset;
			top: var(--kompassi-padding);
			right: var(--kompassi-padding);
			width: 1.5em;
			height: calc( 100% - var(--kompassi-padding) * 2 );
		}
		#kompassi_schedule_filters .clear-filters::before {
			width: 100%;
			margin-right: 0;
		}
		#kompassi_schedule_filters.visible.has-filters-enabled .clear-filters::after {
			display: none;
		}
}

/*
 *  Schedule
 *
 */

summary {
	list-style: none;
}
summary::marker {
	display: none;
}

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

#kompassi_schedule article.filtered {
	display: none !important;
}

#kompassi_schedule article:hover {
	cursor: pointer;
}

/*  Default/common styles  */
#kompassi_schedule article::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;
}

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

#kompassi_schedule article .actions > ::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;
}
	#kompassi_schedule article .actions > .favorite:hover::before {
		margin: -2px;
		padding: 2px;
	}

#kompassi_schedule .times span {
	white-space: nowrap;
}
[id^="kompassi"] .times .length {
	font-size: max(85%, 8pt);
	text-transform: none;
	color: var(--kompassi-fg-50);
	margin-left: 0.4em;
}

#kompassi_schedule article summary {
	outline: none;
}

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

/*  Programs continuing  */
#kompassi_schedule:not([data-display="timeline"]) article.continues {
	order: 3;
}
#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: 2;
}
	#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: 0.5em;
}
	#kompassi_schedule[data-display="list"] article {
		position: relative;
		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);
	}
		#kompassi_schedule[data-display="list"] article::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: calc( 100% - 2.5em ) auto;
			background-position: 50% 0.5em; /* TODO: Why is this the correct value? */
			border-top-left-radius: var(--kompassi-radius);
			border-bottom-left-radius: var(--kompassi-radius);
		}
		#kompassi_schedule[data-display="list"] article summary {
			display: grid;
			grid-template-columns: 1fr min-content;
			grid-template-areas: "title actions" "secondary secondary";
			padding: var(--kompassi-padding);
		}
			#kompassi_schedule[data-display="list"] article summary .favorite::before {
				margin-right: 0;
			}
			#kompassi_schedule[data-display="list"] article summary .secondary {
				display: flex;
				justify-content: space-between;
			}
				#kompassi_schedule[data-display="list"] article summary .secondary > :last-child {
					text-align: right;
				}
		#kompassi_schedule[data-display="list"] article section {
			border-top: 1px solid var(--kompassi-fg-10);
		}
			#kompassi_schedule[data-display="list"] article section > * {
				padding: 0 var(--kompassi-padding);
				margin-bottom: var(--kompassi-padding);
			}
				#kompassi_schedule[data-display="list"] article section .main {
					padding: var(--kompassi-padding);
				}
		#kompassi_schedule[data-display="list"] article section .meta:has(+ .actions) {
			margin-bottom: 0;
		}
		#kompassi_schedule[data-display="list"] article section .actions > a::before {
			content: unset;
		}
		#kompassi_schedule[data-display="list"] article section .actions > a::after {
			content: attr(title);
		}
		#kompassi_schedule[data-display="list"] article section .meta .in-summary {
			display: none;
		}

/*  Show icon  */
/*  TODO: Prefer container query  */
@media screen and (min-width:600px) {
	#kompassi_schedule[data-display="list"] {
		--kompassi-program-list-padding: 0.6em;
		--kompassi-program-list-visual-width: 5.5em;
	}
	#kompassi_schedule[data-display="list"] article {
		padding-left: var(--kompassi-program-list-visual-width);
		grid-template-columns: 50% auto auto;
		grid-template-areas:
			"title title actions"
			"meta meta meta";
	}
}

/*  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);
}
	#kompassi_schedule[data-display="timeline"] .headers {
		position: absolute;
		top: 0;
		width: 100%;
		height: calc(var(--kompassi-schedule-timeline-row-height) * 2);
		background-color: var(--kompassi-bg);
	}
		#kompassi_schedule[data-display="timeline"] .headers .hint {
			position: absolute;
			padding: var(--kompassi-schedule-timeline-row-padding);
			background-color: var(--kompassi-bg);
			overflow: hidden;
		}
			#kompassi_schedule[data-display="timeline"] .headers .day_hint {
				width: 100%;
			}
			#kompassi_schedule[data-display="timeline"] .headers .time_hint {
				top: var(--kompassi-schedule-timeline-row-height);
			}
				#kompassi_schedule[data-display="timeline"] .headers.sticky .time_hint {
					border-left: 1px solid var(--kompassi-fg-10);
					border-top: 1px solid var(--kompassi-fg-10);
				}
		#kompassi_schedule[data-display="timeline"] .headers.sticky {
			z-index: 10;
			box-shadow: var(--kompassi-box-shadow);
		}
	#kompassi_schedule[data-display="timeline"] .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;
	}
		#kompassi_schedule[data-display="timeline"] .ruler:first-of-type {
			border-left-color: transparent;
		}
	#kompassi_schedule[data-display="timeline"] :is(.group-name,article) {
		padding: var(--kompassi-schedule-timeline-row-padding);
		position: absolute;
	}
		#kompassi_schedule[data-display="timeline"] .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;
		}
		#kompassi_schedule[data-display="timeline"] 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,0.25),rgba(0,0,0,0.15));
			color: #fff;

			z-index: 5;
			white-space: nowrap;
			overflow: hidden;
		}
			#kompassi_schedule[data-display="timeline"] article summary :is(.favorite, .secondary) {
				display: none;
			}
			#kompassi_schedule[data-display="timeline"] article.is-favorite .title {
				position: relative;
				padding-left: calc( 1em + 8px );
			}
				#kompassi_schedule[data-display="timeline"] article.is-favorite .title::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;
				}
					#kompassi_schedule[data-display="timeline"] article.is-favorite.continues .title::after {
						left: calc(4px + 1em);
					}
			#kompassi_schedule[data-display="timeline"] article:hover {
				margin-top: -2px;
				box-shadow: 0 0 1em rgba(0,0,0,0.2);
				text-shadow: 0.05em 0.05em 0.1em rgba(0,0,0,0.8);
				filter: brightness(1.25);
				min-width: min-content !important;
				z-index: 2000;
			}
			#kompassi_schedule[data-display="timeline"] article :is(.title) {
				display: block;
			}
			#kompassi_schedule[data-display="timeline"] article.continues :is(.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();
			}
				#kompassi_schedule[data-display="timeline"] article.continues.is-favorite :is(.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));
				}

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

#kompassi_schedule[data-display="timetable"] .table-toolbar {
	display: grid;
	grid-template-columns: auto max-content;
}
	#kompassi_schedule[data-display="timetable"] .table-controls {
		text-align: right;
		--kompassi-padding: 0.2em;
		--kompassi-icon-size: 16px;
	}
		#kompassi_schedule[data-display="timetable"] .table-controls a:not(.active) {
			cursor: not-allowed;
			box-sizing: content-box;
		}

#kompassi_schedule[data-display="timetable"] .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;
}

	#kompassi_schedule[data-display="timetable"] .table::before,
	#kompassi_schedule[data-display="timetable"] .table::after {
		position: absolute;
		display: block;
		height: 100%;
		width: 40px;
		z-index: 4000;
	}
		#kompassi_schedule[data-display="timetable"] .table.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,.2), rgba(0,0,0,0));
		}
		#kompassi_schedule[data-display="timetable"] .table.can-scroll-right::after {
			content: '';
			right: 0;
			background-image: radial-gradient(farthest-side at 100% 50%, rgba(0,0,0,.2), rgba(0,0,0,0));
		}

	#kompassi_schedule[data-display="timetable"] .table .heading {
		padding: var(--kompassi-schedule-timetable-program-padding);
		font-weight: 600;
	}

	#kompassi_schedule[data-display="timetable"] .table .time {
		position: sticky;
		left: 0;
		z-index: 10;
		padding: var(--kompassi-schedule-timetable-program-padding);
	}
		#kompassi_schedule[data-display="timetable"] .table .time-hour {
			font-weight: 600;
		}
		#kompassi_schedule[data-display="timetable"] .table .time-minute {
			/* TODO */
			z-index: 11;
			border-top: 1px solid var(--kompassi-fg-75);
			opacity: 0.4;
		}
			#kompassi_schedule[data-display="timetable"] .table .time-minute span {
				opacity: 0;
			}
	#kompassi_schedule[data-display="timetable"] .table .time-bar {
		border-top: 1px solid var(--kompassi-fg-25);
		margin: 0 calc(-1 * var(--kompassi-padding));
		scroll-snap-align: start;
	}
		#kompassi_schedule[data-display="timetable"] .table .time-bar.first {
			border-top: none;
		}
			#kompassi_schedule[data-display="timetable"] .table .time-bar:last-child {
				border-bottom-right-radius: var(--kompassi-radius);
				border-bottom-left-radius: var(--kompassi-radius);
			}
		#kompassi_schedule[data-display="timetable"] .table .time-odd {
			background-color: var(--kompassi-bg);
		}
		#kompassi_schedule[data-display="timetable"] .table .time-even {
			background-color: #f2f2f2; /* TODO */
		}
			#kompassi_schedule[data-display="timetable"] .table .time-hour:not(.first):before {
				content: '';
				display: block;
				position: absolute;
				top: 0;
				left: 0;
				height: 1px;
				width: 100%;
				background-color: var(--kompassi-fg-25);
			}

#kompassi_schedule[data-display="timetable"] 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,0.25),rgba(0,0,0,0.15));
	color: #fff;
	box-shadow: var(--kompassi-box-shadow);
	z-index: 2;
	scroll-snap-align: start;
}
	#kompassi_schedule[data-display="timetable"] article details {
		height: 100%;
	}
		#kompassi_schedule[data-display="timetable"] article summary {
			height: 100%;
			display: grid;
			grid-template-areas: "title" "favorite";
		}
			#kompassi_schedule[data-display="timetable"] article .title {
				word-wrap: anywhere;
			}
			#kompassi_schedule[data-display="timetable"] article .favorite {
				align-self: end;
				justify-self: end;
			}
				#kompassi_schedule[data-display="timetable"] article .kompassi-icon-favorite::before {
					margin-right: 0;
				}
			#kompassi_schedule[data-display="timetable"] article :is(.secondary) {
				display: none;
			}
	#kompassi_schedule[data-display="timetable"] article:hover {
		text-shadow: 0.05em 0.05em 0.1em rgba(0,0,0,0.8);
		filter: brightness(1.25);
		z-index: 2000;
	}

/*
 *  Modal
 *
 */

#kompassi_modal.kompassi-program .content .actions {
	position: relative;
}
	#kompassi_modal.kompassi-program .content .actions > *,
	#kompassi_modal.kompassi-program .content .actions::before {
		position: relative;
		z-index: 2;
	}
	#kompassi_modal.kompassi-program .content .actions::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%;
	}
	#kompassi_modal.kompassi-program .content .actions::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%);
	}

#kompassi_modal.kompassi-program .content .main {
	justify-content: space-between;
}


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

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

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

#kompassi_modal.kompassi-legend dl.dimension-colors {
	display: grid;
	grid-template-columns: 2em auto;
	grid-gap: 0 1em;
}
	#kompassi_modal.kompassi-legend dl.dimension-colors dt span {
		width: 100%;
		height: var(--kompassi-line-height);
		display: inline-block;
	}
	#kompassi_modal.kompassi-legend dl.dimension-colors dd {
		margin-left: 0;
	}



/*
 *  Annotations
 *
 */

#kompassi_modal.kompassi-program dl {
	margin: var(--kompassi-padding-large) 0 0 0;
	padding-top: var(--kompassi-padding-large);
	border-top: 1px solid var(--kompassi-fg-25);
}

/*
 *  Dimensions
 *
 */

.kompassi-dimensions {
	margin-top: var(--kompassi-padding);
}
	.kompassi-dimensions .dimension {
		display: inline;
		cursor: help;
	}
		.kompassi-dimensions .dimension:empty {
			display: none;
		}
		.kompassi-dimensions .dimension .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;
}