/* Onde2D: disposizione come nell'applet (barra in alto, controlli a sinistra, canvas quadrato a destra) */
html, body {
	margin: 0;
	height: 100%;
	background: #eeeeee;
	color: #000;
	font: 13px sans-serif;
}
#app {
	display: flex;
	flex-direction: column;
	height: 100%;
	min-height: 420px;
}
#toolbar {
	flex: 0 0 auto;
	display: flex;
	flex-wrap: wrap;
	gap: 2px;
	padding: 2px;
	border-bottom: 1px solid #ccc;
}
#toolbar button {
	font: inherit;
	padding: 4px 8px;
	border: 1px solid transparent;
	border-radius: 3px;
	background: transparent;
	cursor: pointer;
}
#toolbar button:hover { border-color: #aaa; background: #f8f8f8; }
#toolbar button.toggle[aria-pressed="true"] {
	border-color: #999;
	background: #d4d4d4;
	box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.25);
}
#main {
	flex: 1 1 auto;
	display: flex;
	min-height: 0;
}
#controls {
	flex: 0 0 auto;
	width: 230px;
	padding: 1px 4px 4px;
	box-sizing: border-box;
	display: flex;
	flex-direction: column;
	gap: 2px;
	overflow-y: auto;
}
#controls label { margin-top: 4px; }
#controls label.center { text-align: center; }
#controls select {
	font: inherit;
	width: 100%;
	padding: 2px;
}
#controls input[type=range] { width: 100%; margin: 2px 0; }
#controls input[type=range]:disabled { opacity: 0.4; }
#canvasWrap {
	flex: 1 1 auto;
	min-width: 150px;
	position: relative;
	overflow: hidden;
}
#cv {
	position: absolute;
	left: 0;
	top: 0;
	display: block;
	background: #000;
	touch-action: none;
}

/* menu del tasto destro */
#canvasPopup {
	position: fixed;
	z-index: 10;
	min-width: 110px;
	padding: 3px 0;
	background: #fff;
	border: 1px solid #888;
	box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.3);
}
#canvasPopup[hidden] { display: none; }
#canvasPopup .item { display: block; padding: 3px 12px; white-space: nowrap; cursor: default; }
#canvasPopup label.item:hover { background: #dde6f5; }
#canvasPopup hr { margin: 3px 0; border: 0; border-top: 1px solid #ccc; }

dialog p { white-space: pre-line; margin: 0 0 1em; }
dialog form { text-align: right; }

/* schermi stretti: controlli sotto il canvas */
@media (max-width: 640px) {
	#app { height: auto; }
	#main { flex-direction: column; }
	#canvasWrap { height: 100vw; flex: 0 0 auto; }
	#controls { width: 100%; order: 2; }
}