/*!
 * CSS Portal — Glassmorphism generator extras
 * Loaded after code-tool.css and generator-tool.css. Everything is scoped to .gt.
 */

.gt .gm-head-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-left: auto; }

.gt .gm-bgs { display: flex; align-items: center; gap: 6px; margin: 0; padding: 0; border: 0; min-width: 0; }
.gt .gm-bgs legend { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.gt .gm-bgs label { position: relative; display: block; margin: 0; padding: 0; cursor: pointer; }
.gt .gm-bgs b { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.gt .gm-bgs input { position: absolute; width: 1px; height: 1px; margin: 0; opacity: 0; pointer-events: none; }
.gt .gm-bgs label > span {
	display: block;
	width: 26px;
	height: 26px;
	border-radius: 50%;
	background-color: var(--ct-surface-2, #e2e8f0);
	box-shadow: 0 0 0 1px var(--ct-border);
	transition: box-shadow .15s, transform .15s;
}
.gt .gm-bgs label:hover > span { transform: scale(1.08); }
.gt .gm-bgs input:checked + span { box-shadow: 0 0 0 2px var(--ct-bg), 0 0 0 4px var(--ct-accent); }
.gt .gm-bgs input:focus-visible + span { box-shadow: 0 0 0 2px var(--ct-bg), 0 0 0 4px var(--ct-accent), 0 0 0 7px var(--ct-accent-soft); }

.gt .gm-dice { position: relative; width: 30px; height: 30px; padding: 0; justify-content: center; }
.gt .gm-dice span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

@media (prefers-reduced-motion: reduce) {
	.gt .gm-bgs label > span { transition: none; }
}