@import url("./style.css");
@import url("./grid.css");

:root{
	color-scheme: dark;
	--bg-active: #AFA2;
	--bg-warning: #FA02;
	--border-active: #AFA8;
	--text-muted: #FFF8;
}

html{
	-webkit-text-size-adjust: 100%;
}

body{
	padding: max(0.4em, env(safe-area-inset-top)) max(0.4em, env(safe-area-inset-right)) max(0.4em, env(safe-area-inset-bottom)) max(0.4em, env(safe-area-inset-left));
	touch-action: manipulation;
	-webkit-tap-highlight-color: transparent;
}

button,
[role="button"]{
	font-family: inherit;
	user-select: none;
	-webkit-user-select: none;
}

button:focus-visible,
[role="button"]:focus-visible{
	outline: 0.12em solid gold;
	outline-offset: 0.12em;
}

#current_bpm{
	font-weight:bold;
	color:lime;
	align-items:center;
}

#display{
	margin-bottom: 0.3em;
}

#loops{
	margin-top: 0.4em;
}

.loop-list.active,
#loops button.active{
	background: var(--bg-active);
	color:#FFF;
	box-shadow: inset 0 0 0 0.08em var(--border-active);
}

#play_button svg,
#stop_button svg{
	margin: 0;
	width: 1.8em;
	height: 1.8em;
}

#status{
	min-height: 1.4em;
	margin: 0.35em auto;
	font-size: 0.55em;
	line-height: 1.35;
	color: var(--text-muted);
}

#status.warning{
	color: #FFD;
}

@media (display-mode: standalone){
	body{
		padding-top: max(0.6em, env(safe-area-inset-top));
	}
}

@media (max-width: 480px){
	.grid-3{
		grid-template-columns: repeat(3, 1fr);
	}
	.grid>*{
		padding: 0.85em 0.5em;
	}
	#loops.grid{
		grid-template-columns: 1fr;
	}
}


/* Metronome overrides bovenop de Groovert 1 look-and-feel. */

.metronome-page #display{
	font-size: 2.5em;
	line-height: 1;
	color: #0F0;
}

#counter_display{
	font-weight: bold;
	color: gold;
}

#levels,
#subdiv_grid,
#type_grid,
#freq_grid{
	margin-top: 0.35em;
}

#subdiv_grid{
	font-weight: bold;
}

#subdiv_grid button{
	letter-spacing: 0.08em;
}

#levels button.active,
#subdiv_grid button.active,
#type_grid button.active,
#freq_grid button.active,
#play_button.active{
	background: var(--bg-active);
	color: #FFF;
	box-shadow: inset 0 0 0 0.08em var(--border-active);
}

@media (max-width: 480px){
	.metronome-page #display{
		font-size: 2.2em;
	}
}


#tap_button.active{
	background: var(--bg-active);
	color:#FFF;
	box-shadow: inset 0 0 0 0.08em var(--border-active);
}

#subdivision_volume_grid{
	margin-top: 0.35em;
}

#subdivision_volume_display{
	cursor: default;
	color: gold;
	font-weight: bold;
}

.metronome-page #display.pulse-beat{
	background: #AFA3;
	box-shadow: inset 0 0 0 0.08em #AFA8, 0 0 0.5em #AFA5;
}

.metronome-page #display.pulse-subdivision{
	background: #FFA2;
	box-shadow: inset 0 0 0 0.08em #FFA6;
}


/* v3 verfijningen voor display, transport en bediening. */
#display_bar{
	grid-template-columns: 0.72fr 1.6fr 0.72fr;
	align-items: stretch;
}

#display_bar #display{
	display:flex;
	justify-content:center;
	align-items:baseline;
	gap:0.12em;
	margin:0;
	min-height: auto;
	padding:0.38em 0.25em;
}

#display_bpm{
	font-size:1em;
	font-weight:900;
	color:#9f9;
	text-shadow: 0 0 0.18em #0F04;
}

#display_separator{
	font-size:0.36em;
	color:#FFF5;
	font-weight:normal;
}

#display_count{
	font-size:0.42em;
	color:#FFD36A;
	font-weight:normal;
	opacity:0.72;
}

#bpm_down,
#bpm_up{
	font-weight:bold;
	color:#FFF;
}

#transport_grid{
	margin-top:0.35em;
}

#play_button{
	background:#4F82;
	color:#DFFDDF;
}

#play_button:hover,
#play_button.active{
	background:#6FA3;
	color:#FFF;
	box-shadow: inset 0 0 0 0.08em #AFA8;
}

#stop_button{
	background:#F542;
	color:#FFDADA;
}

#stop_button:hover{
	background:#F663;
	color:#FFF;
	box-shadow: inset 0 0 0 0.08em #FAA8;
}

#tap_button{
	font-weight:bold;
	letter-spacing:0.08em;
}

#type_grid button{
	font-size:1.28em;
	font-weight:bold;
}

#subdivision_volume_grid button,
#subdivision_volume_display{
	font-size:0.95em;
}

@media (max-width: 480px){
	#display_bar{
		grid-template-columns: 0.64fr 1.72fr 0.64fr;
	}
	#display_bar #display{
		padding-left:0.12em;
		padding-right:0.12em;
	}
	#display_count{
		font-size:0.38em;
	}
}