// Tweak panel styling. 3 grouped font sizes (13 / 11 / 10), no letter-spacing (glyph-corruption
// budget). Borders via border-width + border-color only (never border-style, which aborts the whole
// stylesheet). No blurred box-shadow on rounded elements (it renders unrounded); 0-blur rings only.
// Root is pointer-events:none; only the card takes clicks, so the cursor stays usable over the panel
// while the rest of the scene ignores it. Instructional text is bright, never dim gray.
//
// Slider line: minus stepper · draggable fill track · plus stepper. .tp-track position:relative +
// .tp-fill position:absolute so dragging fills the bar WITHOUT growing the whole row, and the fill is
// pointer-events:none so the drag position stays measured against the track.
//
// The close control is a 42px square (owner ruling: 34px is too small to hit). There is no ESC badge
// anywhere: the × is the close affordance.

TweakPanel {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	pointer-events: none;

	.tp-card {
		position: absolute;
		top: 80px;
		right: 24px;
		width: 300px;
		flex-direction: column;
		pointer-events: all;
		background-color: rgba( 14, 16, 20, 0.94 );
		border-width: 1px;
		border-color: rgba( 90, 220, 255, 0.55 );
		border-radius: 8px;
		padding: 12px;
		font-family: "Roboto Mono", monospace;
		color: #eaf6ff;
	}

	.tp-hdr {
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 6px;
	}
	.tp-title {
		font-size: 13px;
		color: #7fe6ff;
	}
	.tp-hr {
		flex-direction: row;
		align-items: center;
	}
	.tp-key {
		font-size: 10px;
		color: #ffffff;
		font-weight: 700;
		background-color: rgba( 90, 220, 255, 0.14 );
		border-radius: 4px;
		padding: 2px 6px;
		margin-right: 6px;
	}
	.tp-x {
		font-size: 13px;
		color: #ffffff;
		width: 42px;
		height: 42px;
		justify-content: center;
		align-items: center;
		border-radius: 6px;
		border-width: 1px;
		border-color: rgba( 90, 220, 255, 0.45 );
		background-color: rgba( 255, 255, 255, 0.06 );
		pointer-events: all;
		transition: all 0.1s ease;
		&:hover {
			background-color: rgba( 90, 220, 255, 0.28 );
			border-color: rgba( 90, 220, 255, 0.9 );
		}
	}

	.tp-empty {
		font-size: 11px;
		color: #ffffff;
		padding: 6px 0px;
	}

	.tp-tabs {
		flex-direction: row;
		flex-wrap: wrap;
		margin-bottom: 8px;
	}
	.tp-tab {
		font-size: 10px;
		color: #eaf6ff;
		background-color: rgba( 255, 255, 255, 0.06 );
		border-radius: 4px;
		padding: 4px 7px;
		margin-right: 4px;
		margin-bottom: 4px;
		transition: all 0.1s ease;
		&:hover { background-color: rgba( 255, 255, 255, 0.12 ); }
		&.on {
			background-color: rgba( 90, 220, 255, 0.22 );
			color: #ffffff;
			border-width: 1px;
			border-color: rgba( 90, 220, 255, 0.7 );
		}
	}

	.tp-sub {
		flex-direction: column;
		margin-bottom: 8px;
	}
	.tp-item { font-size: 11px; color: #ffffff; }
	.tp-note { font-size: 10px; color: #cfe0ea; }

	.tp-steprow {
		flex-direction: row;
		align-items: center;
		margin-bottom: 8px;
	}
	.tp-sl { font-size: 10px; color: #cfe0ea; margin-right: 6px; }
	.tp-seg {
		font-size: 10px;
		color: #eaf6ff;
		background-color: rgba( 255, 255, 255, 0.06 );
		border-radius: 4px;
		padding: 3px 7px;
		margin-right: 4px;
		transition: all 0.1s ease;
		&:hover { background-color: rgba( 255, 255, 255, 0.12 ); }
		&.on { background-color: rgba( 90, 220, 255, 0.22 ); color: #ffffff; }
	}

	.tp-row {
		flex-direction: column;
		margin-bottom: 6px;
		&.hdr {
			margin-top: 6px;
			border-top-width: 1px;
			border-top-color: rgba( 255, 255, 255, 0.1 );
			padding-top: 8px;
		}
	}
	.tp-rlab {
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 4px;
	}
	.tp-rl { font-size: 11px; color: #eaf6ff; }
	.tp-rv {
		font-size: 11px;
		color: #ffffff;
		justify-content: center;
		text-align: center;
	}

	.tp-slider {
		flex-direction: row;
		align-items: center;
	}
	.tp-track {
		position: relative;
		flex-grow: 1;
		height: 14px;
		margin-left: 6px;
		margin-right: 6px;
		border-radius: 99px;
		background-color: rgba( 255, 255, 255, 0.10 );
		pointer-events: all;
		&:hover { background-color: rgba( 255, 255, 255, 0.18 ); }
		.tp-fill {
			position: absolute;
			left: 0px;
			height: 100%;
			border-radius: 99px;
			background-image: linear-gradient( 90deg, #3AC4DE, #7fe6ff );
			pointer-events: none;
		}
	}
	.tp-stp {
		font-size: 13px;
		color: #eaf6ff;
		background-color: rgba( 255, 255, 255, 0.08 );
		border-radius: 4px;
		width: 24px;
		height: 22px;
		justify-content: center;
		align-items: center;
		transition: all 0.1s ease;
		&:hover { background-color: rgba( 90, 220, 255, 0.28 ); color: #ffffff; }
	}

	.tp-btns {
		flex-direction: row;
		margin-top: 8px;
	}
	.tp-btn {
		font-size: 10px;
		color: #eaf6ff;
		background-color: rgba( 255, 255, 255, 0.08 );
		border-radius: 4px;
		padding: 7px 8px;
		margin-right: 5px;
		justify-content: center;
		align-items: center;
		flex-grow: 1;
		transition: all 0.1s ease;
		&:hover { background-color: rgba( 90, 220, 255, 0.24 ); color: #ffffff; }
		&.wide { margin-right: 0px; }
	}
}