/*
//	dsptool.css
//	(c) nitrologic 2025 all rights reserved
*/

@media print {div {break-inside: avoid;}}

body{
	--renderBackground:#222;
	font-family: Arial, Helvetica, sans-serif;
}
img[mirror]{
	transform: scale(-0.91,0.8);
}
img[avatar]{
	border-radius: 50%;
}

span.title{
	font-family:'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
	font-size:2.5em;
	user-select:text;
}

span.dspbutton{
	display:inline-block;
	vertical-align:top;
}

button{
	margin:8px;
	padding:8px;
	border-style:ridge;
	border-radius: 6px;	
	background-color:var(--inputBackground);
	color:var(--inputColor);
	user-select: none;
	font-weight:500;
}
button[inline]{
	margin:1px;
	padding:2px;
}
button:active{
	background:var(--activeBackground);
}
.button:focus {
	background-color: #3e8e41;
}
button[on]{
	background-color:var(--inputOn);	
	font-weight: bold;
}

button.favourite{
	padding: 0px;
	margin: 4px;
	border: none;
	background: none;	
	color:white;
}

button.favourite:before{
	content:"☆";
}

button.favourite[favourite]:before{
	content:"🟊";
}


input{
	font-family:inherit;
}
body[palette=night] {
	color:#aaa; 
    background-color: #222;
	--contentBackground:#222;
	--panelBackground:#555;
	--panelGrid:#777;
	--groupBackground:#333;
	--inputColor:#ddd;
	--inputBackground:#444;
	--inputOn:#4a4;
	--activeBackground:#aa6;
	--readonlyColor:#eee;
	--readonlyBackground:#343;
	--borderColor:#585;
	--editorColor:#aac;
	--editorBackground:#225;
	--selectColor:#5aa;
	--selectBackground:#022;
	--alink:#888;
	--avisited:#999;
	--ahover:#aaa;
	--aactive:#bbb;
	--namedfieldBackground:#347;
}

body[palette=day] {
	color:#686; 
    background-color: #ffe;
	--contentBackground:#eee;
	--panelBackground:#bbb;
	--panelGrid:#ddd;
	--groupBackground:#ddd;
	--inputColor:#222;
	--inputBackground:#bba;
	--inputOn:#8e8;
	--activeBackground:#88e;
	--readonlyColor:#833;
	--readonlyBackground:#eee;
	--borderColor:#220;
	--editorColor:#225;
	--editorBackground:#aad;
	--selectColor:#220;
	--selectBackground:#cdd;
	--alink:#888;
	--avisited:#777;
	--ahover:#666;
	--aactive:#555;
	--namedfieldBackground:#def;
}

div[statusbar]{
	display: inline-block;
	min-width: 200px;
	font-weight: 500;
}


a:link {color:var(--alink);}
a:visited {color:var(--avisited);}
a:hover {color:var(--ahover);}
a:active {color:var(--aactive);}

div.wiregrid{
	background:var(--bg);
	white-space: nowrap;
	overflow:hidden;
	position:relative;
	width:100%;
	height:100%;
}

div.wire{
	height:240px;
}

div.dspdisplay{
	background-color:#222;
	overflow-y:auto;
	overflow-x:hidden;
	width:100%;
}
div.dspsplit{
	width:12px;
	height:120px;
	display:inline-block;
	cursor:col-resize;
}
canvas.thindsppanel{
	width:240px;
	height:150px;
	background-color:#ddc;
}
canvas.dsppanel{
	width:120px;
	height:100px;
	background-color:#dda;
}

canvas.dspsteps{
	border:8px;
	background-color:#8a8;
	width:100%;
	height:420px;
}

canvas.dspfloor{
	border:8px;
	background-color:#8a8;
	width:100%;
	height:420px;
}

canvas.dspkeys{
	border:8px;
	background-color:#dda;
	width:100%;
	height:120px;
}
canvas.dspcanvas{
	background-color: #191124;
	width:100%;
	height:520px;
}
canvas.audio{
	width:100%;
	height:14vh;
}
canvas.scope{
	width:100%;
	height:20vh;
}

embed.dspembed{
	width:100%;
	height:600px;
}

textarea.wasmterminal{
    width: 34em;
    height: 20em;
	background-color:var(--editorBackground);
	color:var(--editorColor);
	line-height:1.24;
	font-size:medium;
}

textarea.systemterminal{
	background-color:var(--editorBackground);
	color:var(--editorColor);
	line-height:1.24;
	font-size:medium;
}
div.dspsystem{
	background-color:#111;
	padding:4px;
	display:inline-block;
}
div.dspacid32{
	background-color:#111;
	padding:4px;
	display:inline-block;
}
textarea.acid32terminal{
    width: 34em;
    height: 44em;
	background-color:var(--editorBackground);
	color:var(--editorColor);
	line-height:1.24;
	font-size:medium;
}
div.dspextern{
	background-color:#224;
	overflow-y:auto;
	padding:4px;
}
span.dspspan{
	min-width:54px;	
}
label.dsplabel{
	display: flex;
	font-family: monospace;	
	user-select: none;
}
label.dsplabel.value{
	font-family: monospace;	
	font-size:20px;
}

div.panel{
	background-color: var(--panelBackground);
	color:var(--panelGrid);
	white-space:nowrap;
	overflow: scroll;
	height:40vh;
}
div.frame{
	padding:4px;
	overflow-y: auto;
	height:16vh;
}
div.dsptable{
	margin:12px;
	max-height:750px;
	overflow-x:auto;
    overflow-y:auto;
}
div.pool{
	min-height:100px;
	overflow-y: scroll;
	height:32vh;
}
div.sheet{
	display:table;
	border:solid 2px;
	margin:12px;
}
div.dspsheet{
	display:table;
	border:solid 2px;
}
div.dspsheetview{
	margin:12px;
	overflow-x:auto;
}
div.fieldvalues{
	display:table-row;
}
div.namedfields{
	display:table-row;
	background-color: var(--namedfieldBackground);
}


span.colname{
	display:table-cell;
	width:20px;
	font-size:0.5em;
	font-weight:bold;
	vertical-align:middle;
	overflow: hidden;
	user-select:none;
}
span.colvalue{
	display:table-cell;
	max-width:16px;
	font-size:0.5em;
	user-select:text;
}
span.colvalue[impedance="low"]{
	background-color: #448;
}
span.colvalue[impedance="high"]{
	background-color: #484;
}



span.rowname{
	display:table-cell;
	min-width:32px;
	font-size:0.5em;
	font-weight:bold;
	text-align:right;
	padding:2px;
	overflow: hidden;
	user-select:none;
}

span.fieldname{
	display:table-cell;
	min-width:120px;
	vertical-align:middle;
	overflow: hidden;
	border:solid 1px;
	user-select:none;
}

span.fieldvalue{
	display:table-cell;
	min-width:120px;
	padding:6px;
	line-height:1.6;
	overflow: hidden;
	border:solid 1px;
	user-select:text;
	font-size: small;
}
span.fieldcheck{
	display:table-cell;
	border:solid 1px;
}
span.poolkey{
	font-weight:600;
	line-height:1.5;
}




div.content{
	background-color: var(--contentBackground);
	font-size: large;
}
div.editor{
	display:none;
}
div.editor[visible]{
	display:block;
}
audio{
	display:none;
}
audio[visible]{
	display:block;
}
div.emoji{
	background-color: var(--contentBackground);
	font-size:xx-large;
	display:none;
	height:15vh;
	overflow-y: scroll;
}
span.emoji{
	min-width:200px;
	min-height:200px;
	user-select: none;
	border:solid 2px;
	border-radius:4px;
	padding:4px;
}
div.emoji[visible]{
	display:block;
}
div.debugger{
	height:15vh;
	display:none;
}
div.debugger[visible]{
	display:block;
}
textarea.editor{
	width:100%;
	height:25vh;
	background-color:var(--editorBackground);
	color:var(--editorColor);
	line-height:1.8;
	font-size:large;
}
td,th{
	min-width:120px;
	border:solid 1px;
	border-color:var(--borderColor);
}
span.quad{
	user-select: none;
	display:inline-block;
	width:20px;
	height:20px;
	color:var(--panelGrid);
	border:1px solid;
	font-size: xx-small;
	overflow: hidden;
}
span.quad[led]{
	background-color: red;
}
span.quad[level]{
	background-color: black;
}
span.quad[selected]{
	background-color: blue;
}
span.quad:hover {
	background-color: yellow;
}
div[banner]{
	height:122px;
	text-align: right;
	display: block;
}
div[intro]{
	font-size:large;
	margin:48px;
}
span[logo]{
	margin: auto;
	position:absolute;
	top:30px;
	right:0px;
}
img[logo50]{
	height:50px;
	object-fit: contain;
}
div[section]{
	background: rgba(0, 0, 0, .45);
	border:solid 2px darkcyan;
	border-right:solid 5px darkslateblue;
	margin:10px;
	padding:8px;
}
img.snap{
	border:1px solid black;
	margin:2px;
}
canvas.fft{
	border:1px solid black;
	margin:2px;
}
input[type=checkbox]{
	width:20px;
	height:20px;
}
input[type=number]{
	width:100px;
	display:inline-block;
}

input[changed]{
	background-color:lightsalmon;
}

input[type=text]{
	width:230px;
	color: var(--inputColor);
	background-color: var(--inputBackground);
}
input[type="range"]{
	width:160px;
	height:40px;
}

input[type="range"]::-webkit-slider-runnable-track{
	border:2px;
	border-style:none;
}
input[type="range"][modified]::-webkit-slider-runnable-track{
	border-style:solid;
	border-color:green;
}

@media (pointer: coarse) {
	input[type="range"]::-webkit-slider-thumb{
		-webkit-appearance: none;
		width:26px;
		height:32px;
		border-radius:4px;
	}
}

input[type=text][readonly][small]{
	width:92px;
}

input[type=text][readonly]{
	width:230px;
	float:right;
	color: var(--readonlyColor);
	background-color: var(--readonlyBackground);
}

input[register]{
	width:30px;
	float:right;
	clear:both;
}

select{
	margin:6px;
	border-style:ridge;
	border-radius: 6px;	
	background:var(--selectBackground);
	color:var(--selectColor);
	user-select: none;
	padding:5px;
	font-weight:500;
}
select[modified]{
	border-color:orange;
}
canvas:focus-visible {
	outline: 2px solid darkorange;
	border-radius: 3px;
}
div.dspgroup{
	background-color: var(--groupBackground);
	padding:4px;
}
div.dspscreen{
	white-space: nowrap;	
	overflow:hidden;
	border:8px;
	background-color:#544;
	width:100%;
}
div.minibar{
	position:relative;
	float:right;
	z-index:2;
	background-color: var(--groupBackground);
	padding:4px;
}
div.dspbuttons{
	margin-right:auto;
}
span.box{
	display:inline-block;
	padding:6px;
	vertical-align:bottom;
}
span.short{
	display:inline-block;
	width:72px;
	padding:6px;
}

span.dspslider:after{
	content:attr(data-value);
}
span.dspslider{
	display:inline-block;
	padding:6px;
	vertical-align: bottom;
}

span.dsptext{
	display:inline-block;
	vertical-align: top;
}
input.dsptext{
	margin-top:8px;
}
span.dspselect{
	display:inline-block;
	vertical-align: top;
}

span.column{
	display:inline-block;
	width:160px;
	padding:6px;
	vertical-align:top;
}
span.info{
	display:inline-block;
	width:240px;
}
span.frame{
	display:inline-block;
	background-color: #222;
	margin:auto;
}
img[big]{
	object-fit:cover;
	width:100%;
	max-width: 480px;
}
img[banner]{
	position:relative;
	width: 100%;
	height: auto;
	display: block;
	z-index: -1;
}

div.module{
	padding-top: 10px;
	cursor:pointer;
}
div.module:before{
	content:"📂";
}
div.module[closed]:before{
	content:"📁";
}
span.moduleLabel{
	font-size:small;
	width:180px;
	pointer-events: none;
	user-select: none;
}
div.block{
	background-color: var(--inputBackground);;
}
div.cell{
	background:silver;
	line-height: 1.5;
}
span.blocklabel{
	display:inline-block;
	vertical-align: top;
	width:120px;
	text-align: right;
	padding:6px;
}

div.cell{
	background-color: #131;
}

span.cell{
	font-size:small;
	display:inline-block;
	width:180px;
	overflow: hidden;
}

span.param{
	width:120px;
	padding:4px;
	background-color: #242;
	font-size:small;
	display:inline-block;
	overflow: hidden;
}

span.param[fixedpoint]{
	background-color: #224;
}

div.paramcell{
	font-size:x-small;
	background-color: #268;
}

div.paramname{
	background-color: #268;
}

div.log{
	height:200px;
	overflow-y:auto;
	white-space: pre-wrap;
	line-height:1.4;
	font-size: small;
	padding:4px;
}
#drop_zone {
	border: 5px solid blue;
}