@import url('../webgpu-common/style.css');

:root {
	--pc1: #7db7ff;
	--pc2: #65c39a;
	--pc3: #e6b85c;
	--hot: #e18b6d;
}

.shell {
	max-width: 1100px;
}

.view-grid {
	display: grid;
	grid-template-columns: minmax(0, 1.08fr) minmax(0, 0.92fr);
	gap: 10px;
}

.view-card {
	position: relative;
	min-width: 0;
	border: 1px solid var(--line);
	border-radius: 8px;
	overflow: hidden;
	background: var(--panel2);
}

.view-title {
	position: absolute;
	z-index: 2;
	top: 8px;
	left: 10px;
	display: flex;
	align-items: center;
	gap: 7px;
	padding: 3px 7px;
	border: 1px solid color-mix(in srgb, var(--line) 78%, transparent);
	border-radius: 999px;
	background: color-mix(in srgb, var(--panel2) 86%, transparent);
	color: var(--muted);
	font-size: 10px;
	letter-spacing: .04em;
	text-transform: uppercase;
	pointer-events: none;
}

.view-title strong {
	color: var(--text);
}

.viz-canvas {
	display: block;
	width: 100%;
	height: auto;
	border-radius: 0;
	touch-action: none;
	cursor: crosshair;
}

.viz-canvas.orbitable {
	cursor: grab;
}

.viz-canvas.orbitable:active {
	cursor: grabbing;
}

.controls-panel {
	margin-top: 10px;
	padding: 10px;
	border: 1px solid var(--line);
	border-radius: 8px;
	background: var(--panel);
}

.control-row {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	align-items: end;
}

.control-row + .control-row {
	margin-top: 9px;
	padding-top: 9px;
	border-top: 1px solid var(--line);
}

.control-row label {
	min-width: 112px;
}

.control-row input[type='range'] {
	width: 138px;
}

.check {
	display: flex;
	grid-auto-flow: column;
	align-items: center;
	justify-content: start;
	gap: 7px;
	min-height: 31px;
	padding: 6px 8px;
	border: 1px solid var(--line);
	border-radius: 6px;
	background: var(--panel2);
	color: var(--text);
	cursor: pointer;
}

.check input {
	margin: 0;
	accent-color: var(--accent);
}

.value {
	color: var(--text);
}

.metrics {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 7px;
	margin-top: 10px;
}

.metric {
	min-width: 0;
	padding: 7px 8px;
	border: 1px solid var(--line);
	border-radius: 6px;
	background: var(--panel2);
	color: var(--muted);
	font-size: 10px;
}

.metric strong {
	display: block;
	margin-top: 2px;
	overflow: hidden;
	color: var(--text);
	font-size: 12px;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.legend {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin-top: 8px;
	color: var(--muted);
	font-size: 10px;
}

.legend span::before {
	content: '';
	display: inline-block;
	width: 8px;
	height: 8px;
	margin-right: 5px;
	border-radius: 50%;
	background: var(--swatch, var(--accent));
}

.teaching-note {
	margin-top: 9px;
	padding: 7px 9px;
	border-left: 2px solid var(--accent);
	border-radius: 0 6px 6px 0;
	background: color-mix(in srgb, var(--accent) 7%, transparent);
	color: var(--muted);
	font-size: 11px;
}

.teaching-note strong {
	color: var(--text);
}

button.primary {
	background: color-mix(in srgb, var(--accent) 13%, var(--panel2));
}

button[aria-pressed='true'] {
	border-color: var(--good);
	color: var(--good);
}

@media (max-width: 760px) {
	.view-grid {
		grid-template-columns: 1fr;
	}
	.metrics {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
	.control-row input[type='range'] {
		width: min(150px, 38vw);
	}
}

@media (min-width: 761px) and (min-height: 900px) {
	.shell {
		max-width: 1320px;
	}
}

@media (max-width: 430px) {
	.shell {
		padding: 7px;
	}
	.controls-panel {
		padding: 8px;
	}
	.control-row {
		gap: 8px;
	}
	.control-row label {
		min-width: 104px;
	}
}

@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after {
		scroll-behavior: auto !important;
		transition-duration: 0.001ms !important;
		animation-duration: 0.001ms !important;
		animation-iteration-count: 1 !important;
	}
}

html[data-ramwise-fullscreen],
html[data-ramwise-fullscreen] body {
	height: 100%;
	min-height: 0;
	overflow: hidden;
}

html[data-ramwise-fullscreen] .shell {
	display: flex;
	flex-direction: column;
	width: 100%;
	max-width: none;
	height: 100%;
	min-height: 0;
	padding: 10px;
}

html[data-ramwise-fullscreen] .head {
	flex: 0 0 auto;
	margin-bottom: 8px;
}

html[data-ramwise-fullscreen] .view-grid {
	flex: 1 1 auto;
	min-height: 0;
}

html[data-ramwise-fullscreen] .view-card,
html[data-ramwise-fullscreen] .viz-canvas {
	height: 100%;
}

html[data-ramwise-fullscreen] .controls-panel {
	flex: 0 0 auto;
	max-height: 42vh;
	margin-top: 8px;
	overflow: auto;
	overscroll-behavior: contain;
}

@media (max-width: 760px) {
	html[data-ramwise-fullscreen] .view-grid {
		grid-template-rows: repeat(2, minmax(0, 1fr));
	}
}