:root {
	--gutter-size: 2rem;
	--vertical-gutter-size: calc( var( --gutter-size ) / 2 );
	--background-color: #fafafa;
	--primary-color: #202;
	--button-padding: 0.25rem 0.5rem;
	--input-padding: var( --button-padding );
}

* {
	box-sizing: border-box;
	font-family: Segoe UI,Roboto,Arial, sans-serif;
}

body {
	margin: 0;
	color: var( --primary-color );
	background: var( --background-color );
}

header { display: none; }

input { 
	margin: 0;
	max-width: 100%;
	padding: var( --input-padding );
}

input[type="number"] {
	max-width: 125px;
}

button {
	padding: var( --button-padding );
	border: none;
	background: var( --primary-color );
	color: var( --background-color );
	font-size: 1rem;
	cursor: pointer;
}

.practice-player {
	display: grid;
	grid-template-areas: "media" "memory";
	grid-template-columns: 1fr;
	gap: var( --vertical-gutter-size ) var( --gutter-size );
	padding: var( --gutter-size );
}

.practice-player .media, .practice-player .memory {
	display: flex;
	flex-direction: column;
	gap: var( --vertical-gutter-size );
}

.practice-player .media { grid-area: media; }
.practice-player .memory { grid-area: memory; }

@media screen and ( min-width: 961px ) {
	.practice-player {
		grid-template-areas: "media memory";
		grid-template-columns: 2fr 1fr;
	}
}

.media .file {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	margin-bottom: var( --vertical-gutter-size );
}

.media .file svg g {
	stroke: var( --primary-color );
}

.media .file input[type="text"] {
	flex: 1;
	background: transparent;
	border: 1px solid var( --primary-color );
	color: var( --primary-color );
	cursor: pointer;
}

.media .file input[type="file"] { display: none; }

.media .player, .media .controls {
	transition: all 0.2s ease;
}

.media .player {
	display: block;
	width: 100%;
	aspect-ratio: 16 / 9;
	background: var( --primary-color );
}

.media .controls {
	display: flex;
	gap: var( --gutter-size );
	align-items: center;
	justify-content: space-between;
}

.media .controls .title { 
	display: inline-block; 
	margin: 0;
	font-size: 1rem;
}

.media .controls svg { 
	display: inline-block; 
	fill: var( --primary-color );
}

.media .controls .speed, .media .controls .speed .label {
	display: inline-flex;
	align-items: center;
}

.media .controls .speed { gap: 0.5rem; }

.media .controls .speed .value, .media .controls .speed .symbol {
	font-family: monospace;
	font-variant-numeric: tabular-nums;
}

.media .controls .speed .meter .gauge {
	stroke: var( --background-color );
}

.media .controls .loop {
	display: inline-flex;
	gap: 1rem;
	align-items: center;
}

.media .controls .loop .toggle { 
	cursor: pointer; 
	opacity: 0.5;
	pointer-events: none;
	transition: opacity 0.2s ease;
}

.media .controls .loop .toggle input { display: none; }

.practice-player.has-loop-start.has-loop-end .media .controls .loop .toggle {
	opacity: 1;
	pointer-events: all;
}

.media .controls .loop .toggle input + svg {
	vertical-align: middle;
}

.media .controls .loop .toggle input + svg .slash { 
	opacity: 1; 
	transition: opacity 0.2s ease; 
	stroke: var( --background-color );
}
.media .controls .loop .toggle input:checked + svg .slash {
	opacity: 0;
}

.media .controls .loop input[type="number"] { width: 6rem; }

.practice-player.has-loop-start .media .controls .loop button.action .start,
.practice-player.has-loop-end .media .controls .loop button.action .end,
.practice-player:not(.has-loop-start) .media .controls .loop button.action .end,
.practice-player:not(.has-loop-start) .media .controls .loop button.action .clear,
.practice-player:not(.has-loop-end) .media .controls .loop button.action .clear {
	display: none;
}

.markers .title, .loops .title {
	margin-top: 0;
}

.markers ol, .markers li, .loops ol, .loops li {
	list-style: none;
	padding: 0;
	margin: 0;
	display: flex;
	gap: 1rem;
	align-items: flex-end;
	justify-content: space-between;
}

.markers ol, .loops ol {
	flex-direction: column;
}

.markers li, .loops li {
	flex-direction: row;
}

.markers li:not([value="0"]), .loops li:not([value="0"]) {
	width: 100%;
}

.markers li[value="0"] .jump, 
.markers li[value="0"] .label, 
.markers li[value="0"] .position, 
.markers li[value="0"] .delete,
.loops li[value="0"] .run,
.loops li[value="0"] .label, 
.loops li[value="0"] .start, 
.loops li[value="0"] .end,
.loops li[value="0"] .delete { 
	display: none; 
}

.markers li input[type="text"] { flex: 2; }
.markers li input[type="number"] { flex: 1; }

.loops li input[type="text"], .loops li input[type="number"] { flex: 1; }

.practice-player:not( .has-media ) .media media,
.practice-player:not( .has-media ) .controls,
.practice-player:not( .has-loop-start.has-loop-end ) .loop .toggle,
.practice-player:not( .has-media ) .markers,
.practice-player:not( .has-media ) .loops {
	opacity: 0.5;
	pointer-events: none;
}