body { 
	--ctrlht:110px;
}
.ctrldown {
	--ctrlht:11px;
}



#display {
	width:calc(min(100vw,1000px));
	height:auto;
	max-height:calc(100vh - var(--ctrlht));
}



@media only screen and (max-width:700px), screen and (max-height:700px) {
	body { --ctrlht:100px; } /* this would really vary as a function of width, but this is fine for landscape */
}

body, html {
	background:#333;
}


#plotback { 
	stroke: none;
	fill: url('#spectrum');
	filter: url('#cvd'); 
}

#plotframe {
	fill: none;
	stroke: #333;
	stroke-width:4px;
	shape-rendering: crispedges;
}

#marker { stroke-width:4; stroke:#fff; opacity:0.8; }

#curveS, #curveM, #curveL { stroke-width:3; fill:none; stroke:#000; }

text {
	font-family:Arial;
	font-size:14px;
	fill:#fff;
}
#showNM, #respS, #respM, #respL {
	text-anchor:end;
}


.v1 #respL, .v1 #respL+text, .v2 #respM, .v2 #respM+text, .v3 #respS, .v3 #respS+text {
	display:none;
}
.v1 #curveL, .v2 #curveM, .v3 #curveS {
	opacity:0.05;
}

/****************** controls ***********************/

#ctrlback { 
	display:flex; flex-flow:row wrap; 
	justify-content:space-between; 
	align-items:flex-start; 
	z-index:2;
}
.moreoptions { 
	border-bottom:none; 
	margin-bottom:0px; 
	grid-template-columns: repeat(2,auto);
}

select { 
	height:26px; 
}
select[name='vision'] { 
	width:108px; 
}

input[name='lambda'] {
	width:310px;
	max-width: calc(100vw - 256px);
}

.controlgrid.one :nth-child(n+2) {
	margin-left: unset;
}