/* G.M.E. — theme adjustments layered on top of the prototype CSS.
 * Keeps the visual output identical while adapting a few elements from the
 * React prototype to server-rendered markup (anchor lang switch, real
 * checkbox chips, map host element). */

/* Language switch is now anchors instead of buttons — mirror button styling. */
.lang-switch a.lang-btn {
	background: transparent;
	color: var(--fg-muted);
	border: 0;
	padding: 6px 9px;
	text-transform: uppercase;
	font-weight: 700;
	font-family: var(--font-mono);
	font-size: 11px;
	letter-spacing: 0.08em;
	text-decoration: none;
	transition: all var(--dur-fast) var(--ease-mech);
	display: inline-flex;
	align-items: center;
}
.lang-switch a.lang-btn + a.lang-btn { border-left: 1px solid var(--border); }
.lang-switch a.lang-btn:hover { color: var(--fg); }
.lang-switch a.lang-btn.on { background: var(--fg); color: var(--bg); }

/* Product-of-interest chips are real checkboxes inside a <label>.
 * Provide the checked look even without JS via :has(). */
.check-chip { user-select: none; }
.check-chip:has(input:checked) {
	border-color: var(--accent);
	color: var(--accent);
	background: var(--accent-faint);
}

/* Deployment map host — fill the framed panel, keep the corner overlays on top. */
.deploy-map { display: block; }
#gme-map.gme-map-host { position: absolute; inset: 0; z-index: 1; }
.deploy-map .map-overlay, .deploy-map .map-overlay-r { z-index: 2; }

/* Career rows: visible keyboard focus. */
.career-row:focus-visible { outline: 1px solid var(--accent); outline-offset: 4px; }