// Demo hint card. Same visual language as the tweak panel: 3 grouped font sizes (13 / 11 / 10), no
// letter-spacing, borders via border-width + border-color only (never border-style, which aborts the
// whole stylesheet), no blurred box-shadow on rounded elements. Root is pointer-events:none so only the
// card takes clicks. Every text colour sits above the contrast floor: instructions are never dim gray.
//
// The close control is a 42px square, matching the tweak panel. No ESC badge anywhere.

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

	.hc-card {
		position: absolute;
		top: 80px;
		left: 24px;
		width: 340px;
		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;
	}

	.hc-hdr {
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 6px;
	}
	.hc-title {
		font-size: 13px;
		color: #7fe6ff;
	}
	.hc-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 );
		}
	}

	.hc-lede {
		font-size: 11px;
		color: #ffffff;
		margin-bottom: 10px;
	}

	.hc-row {
		flex-direction: row;
		align-items: center;
		margin-bottom: 5px;
	}
	.hc-key {
		font-size: 10px;
		color: #ffffff;
		font-weight: 700;
		background-color: rgba( 90, 220, 255, 0.18 );
		border-radius: 4px;
		padding: 3px 7px;
		margin-right: 8px;
		width: 96px;
		justify-content: center;
		align-items: center;
	}
	.hc-what {
		font-size: 11px;
		color: #eaf6ff;
		flex-grow: 1;
	}

	.hc-foot {
		font-size: 10px;
		color: #cfe0ea;
		margin-top: 8px;
		border-top-width: 1px;
		border-top-color: rgba( 255, 255, 255, 0.12 );
		padding-top: 8px;
	}
}