.highlight-reel {
	position: relative;
	
	.subtitle {
		position: absolute;
		z-index: 100;
		bottom: var(--margin);

		font-size: calc(var(--figcaption-font-size) * 2); 
		letter-spacing: .03em;
		line-height: 25px;
		margin-right: -.5px;
		/* font-family: var(--font-selectric-un); */
		color: var(--background);

		font-feature-settings: 'ss01' on;
		font-family: var(--font-pixel-font-12);
		font-weight: 400;
		font-size: calc(var(--font-size) * 1);
		
		background: var(--accent);
		padding: .75em 1em .75em;
		/* margin-left: -1em; */
		
	}
}

@media (width <= 767px) {
	.highlight-reel {
		.subtitle {
			/* margin-left: calc(-1 * var(--left-gutter)); */
			
			bottom: 50%;
			transform: translateY(50%);
			
		}
	}
}








.incantation-entry-point .overflow-gallery-entry-point {
	width: calc(100% - 13px);
	height: 14em;
	margin-top: calc(-.5 * var(--margin));
}
@media (width <= 767px) {
	.incantation-entry-point .overflow-gallery-entry-point {
		width: 100%;
		margin-top: calc(-.5 * var(--margin) + 1px) !important;
		margin-top: 0;
		height: 4.5em;
		box-sizing: border-box;
	}
}






.keyboard-chart {
	background: var(--light-gray);	
	overflow-x: auto;
	position: relative;
	
	/* &:before {
		content: '';
		position: absolute;
		pointer-events: none;
		inset: 0;
		left: -100px;
		width: 150px;
		background: red;
	} */
}
@media (prefers-color-scheme: dark) {
	.keyboard-chart {
		background: var(--dark-gray);
	}
}
@media (width <= 767px) {
	.keyboard-chart {
		width: 100vw;
		box-sizing: border-box;
	}
}


.keyboard-chart > .contents {
	display: grid;
	min-width: 100%;
	width: min-content;
	/* max-width: min-content; */
	gap: calc(var(--margin) / 2) var(--margin);
	box-sizing: border-box;
	padding: var(--margin);
	
	grid-template-columns: 10em 1.5fr 1.3fr;	
}
@media (width <= 767px) {
	.keyboard-chart > .contents {
		padding-left: calc(var(--margin));
		padding-right: calc(var(--margin));
		
		grid-template-columns: 7em 7em 16em;	
	}
}

.keyboard-chart > .contents > .icon {
	grid-column: 1 / -1;
}

.keyboard-chart .header {
	position: sticky;
	/* color: var(--black); */
	font-size: var(--figcaption-font-size); 
	letter-spacing: .03em;
	line-height: 25px;
	margin-right: -.5px;
	font-family: var(--font-selectric-un);
	color: var(--text-gray);
}

.keyboard-chart .name {
	grid-column: 1;
}
.keyboard-chart .name:not(.header) {
	padding: calc(var(--margin) / 4) calc(var(--margin) / 2);
		
	font-size: var(--figcaption-font-size); 
	letter-spacing: .03em;
	line-height: 25px;
	margin-right: -.5px;
	font-family: var(--font-selectric-un);
	user-select: none;
	-webkit-user-select: none;	
	min-height: 2em;
	flex-shrink: 0;
	
	display: flex;
	align-items: start;

	background: var(--dark-gray);
	color: var(--background);
	&.event {
		background: var(--background);
		color: var(--dark-gray);
		outline: .5px solid var(--dark-gray);
	}
}

@media (prefers-color-scheme: dark) {
  .keyboard-chart .name:not(.header) {
		background: var(--light-gray);
  	color: var(--background);
		
		&.event {
			color: var(--text-gray);
		}
	}
}

.keyboard-chart .explanation {
	grid-column: 2;
}

.keyboard-chart .explanation:not(.header) {
	font-family: var(--font-selectric-un);
	font-size: var(--figcaption-font-size); 
  line-height: calc(var(--figcaption-font-size) * 1.2); 
	flex-shrink: 0;
}

.keyboard-chart .apps {
	grid-column: 3;
}
	
.keyboard-chart .apps:not(.header) {
	font-family: var(--font-selectric-un);
	font-size: var(--figcaption-font-size); 
	/* letter-spacing: .03em; */
	line-height: calc(var(--figcaption-font-size) * 1.2); 
	margin-top: calc(var(--margin) / 2);
	
	padding: 0;
	margin: 0;
	/* margin-top: .5em; */
	list-style: none;
	/* width: 15em; */
	
	/* display: inline; */
	
	/* color: var(--text-gray); */
	
	li {
		/* display: inline-block; */
		white-space: nowrap;
		padding-left: calc(1em + 6px);
		position: relative;
		padding-right: .5em;
		margin-bottom: .25em;

		/* white-space: nowrap; */
		
		&:after {
			content: '';
			position: absolute;
			left: 0;
			width: 1em;
			height: 1em;
			background-size: 100%;
		}
		
		&:after {
			/* content: ', '; */
		}
		/*padding-left: calc(var(--margin) / 2);
		position: relative;
		margin-bottom: .25em;
			
		
		&:before {
			position: absolute;
			content: '';
			left: 0;
			top: .57em;
			width: calc(var(--margin) * .33);
			border-top: .5px solid var(--text);
		}*/
	}	

}


.keyboard-chart input[type='radio'] {
	display: none;
}
.keyboard-chart label {
	vertical-align: top;
	white-space: nowrap;
	border: .5px solid var(--text-gray);
	padding: 4px 16px 1px 16px;
	margin-top: -4px;
	margin-bottom: 4px;
	margin-right: -5.5px;
	color: var(--text-gray);
	display: inline-block;
	font-size: var(--figcaption-font-size); 
	letter-spacing: .03em;
	line-height: 25px;
	font-family: var(--font-selectric-un);
	user-select: none;
	-webkit-user-select: none;
	cursor: var(--cursor-hand);
	
  &:active:not(:disabled) {
		cursor: var(--cursor-hand-pressed);
		padding: 5px 16px 0 16px;
	}
	
	&:has(input:checked) {
		background: var(--accent);
		border-color: var(--accent);
		color: var(--background);
	}
}


.main > ul > li[data-icon] {
	position: relative;

	&:before {
		/* display: none; */
	}
	
	padding-left: 2.8em;
	
	&:after {
		content: '';
		position: absolute;
		left: 1.4em;
		top: .1em;
		width: 1em;
		height: 1em;
		background-size: 100%;
	}

}


li:after { background-image: url(/images/key-in-sight/icons/generic.avif); }
	
li[data-icon='8bitdo']:after { background-image: url(/images/key-in-sight/icons/8bitdo.avif); }
li[data-icon='alfred']:after { background-image: url(/images/key-in-sight/icons/alfred.avif); }
li[data-icon='automator']:after { background-image: url(/images/key-in-sight/icons/automator.avif); }
li[data-icon='bettertouchtool']:after { background-image: url(/images/key-in-sight/icons/bettertouchtool.avif); }
li[data-icon='chrysalis']:after { background-image: url(/images/key-in-sight/icons/chrysalis.avif); }
li[data-icon='customshortcuts']:after { background-image: url(/images/key-in-sight/icons/customshortcuts.avif); }
li[data-icon='espanso']:after { background-image: url(/images/key-in-sight/icons/espanso.avif); }
li[data-icon='hammerspoon']:after { background-image: url(/images/key-in-sight/icons/hammerspoon.avif); }
li[data-icon='kanata']:after { background-image: url(/images/key-in-sight/icons/kanata.avif); }
li[data-icon='karabiner']:after { background-image: url(/images/key-in-sight/icons/karabiner.avif); }
li[data-icon='keyboard-cowboy']:after { background-image: url(/images/key-in-sight/icons/keyboard-cowboy.avif); }
li[data-icon='keyboard-maestro']:after { background-image: url(/images/key-in-sight/icons/keyboard-maestro.avif); }
li[data-icon='kmonad']:after { background-image: url(/images/key-in-sight/icons/kmonad.avif); }
li[data-icon='launchbar']:after { background-image: url(/images/key-in-sight/icons/launchbar.avif); }
li[data-icon='mac-os']:after { background-image: url(/images/key-in-sight/icons/mac-os.avif); }
li[data-icon='quicksilver']:after { background-image: url(/images/key-in-sight/icons/quicksilver.avif); }
li[data-icon='raycast']:after { background-image: url(/images/key-in-sight/icons/raycast.avif); }
li[data-icon='razer-chroma']:after { background-image: url(/images/key-in-sight/icons/razer-chroma.avif); }
li[data-icon='rocket']:after { background-image: url(/images/key-in-sight/icons/rocket.avif); }
li[data-icon='shortcuts']:after { background-image: url(/images/key-in-sight/icons/shortcuts.avif); }
li[data-icon='textexpander']:after { background-image: url(/images/key-in-sight/icons/textexpander.avif); }
li[data-icon='typinator']:after { background-image: url(/images/key-in-sight/icons/typinator.avif); }
li[data-icon='via']:after { background-image: url(/images/key-in-sight/icons/via.avif); }
li[data-icon='wootility']:after { background-image: url(/images/key-in-sight/icons/wootility.avif); }


.keyboard-chart .examples {
	display: none;
	
	font-family: var(--font-selectric-un);
	font-size: var(--figcaption-font-size); 
	/* letter-spacing: .03em; */
	line-height: calc(var(--figcaption-font-size) * 1.2); 
	/* margin-top: calc(var(--margin) / 2); */
	
	padding: 0;
	margin: 0;
	/* margin-top: .5em; */
	list-style: none;
	/* width: 25em; */
		
	li {
		padding-left: calc(var(--margin) / 2);
		position: relative;
		margin-bottom: .5em;
			
		
		&:before {
			position: absolute;
			content: '';
			left: 0;
			top: .57em;
			width: calc(var(--margin) * .33);
			border-top: .5px solid var(--text);
		}
	}	
}

.keyboard-chart[data-type='examples'] .examples {
	display: block;
}
.keyboard-chart[data-type='examples'] .apps {
	display: none;
}
/* 
.keyboard-chart .icon {
	display: block;
	a0.0.00..0.0.0....ign-self: start;
	margin-top: 8px;
	flex-shrink: 0;
	outline: 1px solid red;
	background: var(--accent);
}


 */

.fork-choice {
	background: var(--accent-diluted-light);
	padding: var(--margin);
	box-sizing: border-box;
	
	.choices {
		display: flex;
		gap: var(--margin);
		margin-top: calc(var(--margin) * .5);
		
		font-size: var(--figcaption-font-size); 
		letter-spacing: .03em;
		line-height: 1.2;
		font-family: var(--font-selectric-un);
		/* color: var(--text-gray); */
	}
	
	p {
		margin-bottom: 0;
	}
	
	button,
	a.internal-link-de-facto {
		vertical-align: top;
		border: .5px solid var(--text-gray);
		padding: calc(13px * 1.5) calc(16px * 1.5) calc(11px * 1.5) calc(16px * 1.5);
		/* margin-bottom: -.5px; */
		margin-right: -5.5px;
		line-height: 1.2;
		background: var(--background);
		color: var(--black);
		display: block;
		text-align: left;
		
		
		/* font-size: calc(var(--figcaption-font-size) * 1.5); 
		letter-spacing: .03em;
		line-height: calc(25px * 1.5);
		font-family: var(--font-selectric-un); */
		
		font-feature-settings: 'ss01' on;
		font-family: var(--font-pixel-font-12);
		font-weight: 400;
		font-size: calc(var(--font-size) * 1);

		margin-bottom: calc(var(--margin) * .5);
		user-select: none;
		-webkit-user-select: none;
		cursor: var(--cursor-hand);
		
		&:active:not(:disabled) {
			cursor: var(--cursor-hand-pressed);
			padding: calc(14px * 1.5) calc(16px * 1.5) calc(10px * 1.5) calc(16px * 1.5);
		}
		
		&.selected {
			background: var(--accent);
			border-color: var(--accent);
			color: var(--background);
		}
	}
}
@media (prefers-color-scheme: dark) {
	.fork-choice {
		background: var(--accent-diluted);
	}
}
	

.fork-prompt-default.invisible {
	display: none;
}

.fork-prompt-not-default {
	display: none;
	
	&.visible {
		display: block;
	}
}

.forked {
	/* background: red; */
	
	&.invisible-by-default {
		display: none;
	}
}