/*
 * Gombeke components -- buttons, status lamp, spec plate, glyph, instrument bay.
 * Machined panels, amber signal, engraved bevels. Tokens only.
 */

/* ============================================================= Buttons */
.gmb-btn {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--gmb-space-2);
	padding: 0.75rem 1.4rem;
	border-radius: var(--gmb-r-pill);
	font-family: var(--gmb-font-sans);
	font-size: var(--gmb-text-sm);
	font-weight: 600;
	letter-spacing: 0.01em;
	line-height: 1;
	white-space: nowrap;
	cursor: pointer;
	isolation: isolate;
	transition:
		transform var(--gmb-dur-state) var(--gmb-ease-out-quart),
		box-shadow var(--gmb-dur-state) var(--gmb-ease-out-quart),
		color var(--gmb-dur-state) ease,
		background-color var(--gmb-dur-state) ease;
	will-change: transform;
}
.gmb-btn__label { position: relative; z-index: 1; }
.gmb-btn:active { transform: translateY(1px) scale(0.99); }

/* Primary -- amber fill, machined seat on press */
.gmb-btn--primary {
	background: var(--gmb-signal);
	color: var(--gmb-ground-deep);
	box-shadow: inset 0 1px 0 var(--gmb-signal-hi), 0 8px 24px -14px var(--gmb-signal-a40);
}
.gmb-btn--primary:hover {
	background: var(--gmb-signal-hi);
	box-shadow: inset 0 1px 0 var(--gmb-signal-hi), var(--gmb-glow-signal);
}
.gmb-btn--primary:active {
	background: var(--gmb-signal-deep);
	box-shadow: inset 0 2px 4px oklch(0 0 0 / 0.35);
}

/* Secondary -- ghost with engraved outline warming to amber */
.gmb-btn--secondary {
	background: transparent;
	color: var(--gmb-ink);
	box-shadow: inset 0 0 0 1px var(--gmb-line-hi);
}
.gmb-btn--secondary:hover {
	color: var(--gmb-signal-hi);
	box-shadow: inset 0 0 0 1px var(--gmb-signal-a40), 0 0 32px -16px var(--gmb-signal-a40);
}

/* Ghost -- quiet */
.gmb-btn--ghost { background: transparent; color: var(--gmb-ink-soft); padding-inline: 0.9rem; }
.gmb-btn--ghost:hover { color: var(--gmb-ink); }

/* Text -- underline wipe only */
.gmb-btn--text {
	padding: 0;
	background: none;
	color: var(--gmb-ink);
	background-image: linear-gradient(var(--gmb-signal), var(--gmb-signal));
	background-position: 0 100%;
	background-repeat: no-repeat;
	background-size: 0% 1px;
	border-radius: 0;
}
.gmb-btn--text:hover { color: var(--gmb-signal-hi); background-size: 100% 1px; transform: none; }

.gmb-btn--lg { padding: 0.95rem 1.9rem; font-size: var(--gmb-text-base); }

/* ============================================================= Status lamp */
.gmb-lamp {
	display: inline-flex;
	align-items: center;
	gap: 0.45em;
	font-family: var(--gmb-font-mono);
	font-size: var(--gmb-text-2xs);
	font-weight: 500;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--gmb-ink-mute);
}
.gmb-lamp__dot {
	width: 7px;
	height: 7px;
	border-radius: var(--gmb-r-pill);
	background: var(--gmb-ink-mute);
	flex: none;
}
.gmb-lamp--live { color: var(--gmb-live); }
.gmb-lamp--live .gmb-lamp__dot { background: var(--gmb-live); box-shadow: var(--gmb-glow-live); animation: gmb-pulse 2.4s var(--gmb-ease-out-quart) infinite; }
.gmb-lamp--beta { color: var(--gmb-signal); }
.gmb-lamp--beta .gmb-lamp__dot { background: var(--gmb-signal); box-shadow: 0 0 10px -2px var(--gmb-signal-a40); }
.gmb-lamp--soon { color: var(--gmb-ink-mute); }
.gmb-lamp--soon .gmb-lamp__dot { background: var(--gmb-signal); }
.gmb-lamp--offline { color: var(--gmb-danger); }
.gmb-lamp--offline .gmb-lamp__dot { background: var(--gmb-danger); }

@keyframes gmb-pulse {
	0%, 100% { box-shadow: 0 0 0 0 var(--gmb-live-a50); opacity: 1; }
	50%      { box-shadow: 0 0 10px 1px var(--gmb-live-a50); opacity: 0.72; }
}
@media (prefers-reduced-motion: reduce) {
	.gmb-lamp--live .gmb-lamp__dot { animation: none; }
}

/* ============================================================= Spec plate */
.gmb-spec {
	display: flex;
	flex-direction: column;
	border-top: 1px solid var(--gmb-line);
	margin: 0;
}
.gmb-spec__row {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: var(--gmb-space-4);
	padding-block: 0.55rem;
	border-bottom: 1px solid var(--gmb-line);
}
.gmb-spec__key {
	font-family: var(--gmb-font-mono);
	font-size: var(--gmb-text-2xs);
	font-weight: 500;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--gmb-ink-mute);
	margin: 0;
}
.gmb-spec__val {
	font-size: var(--gmb-text-sm);
	font-weight: 500;
	color: var(--gmb-ink);
	margin: 0;
	text-align: right;
}

/* ============================================================= Glyph */
.gmb-glyph {
	width: 44px;
	height: 44px;
	color: var(--gmb-ink-soft);
	transition: color var(--gmb-dur-state) ease, transform var(--gmb-dur-state) var(--gmb-ease-out-quart);
}

/* ============================================================= Instrument bay */
.gmb-bay {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: var(--gmb-space-4);
	padding: var(--gmb-space-5);
	background: var(--gmb-panel);
	border: 1px solid var(--gmb-line);
	border-radius: var(--gmb-r);
	box-shadow: var(--gmb-bevel);
	transition:
		transform var(--gmb-dur-state) var(--gmb-ease-out-quart),
		border-color var(--gmb-dur-state) ease,
		box-shadow var(--gmb-dur-state) var(--gmb-ease-out-quart);
}
.gmb-bay::after {
	/* engraved top accent that lights amber on hover */
	content: "";
	position: absolute;
	inset: 0 auto auto 0;
	width: 100%;
	height: 2px;
	border-radius: var(--gmb-r) var(--gmb-r) 0 0;
	background: linear-gradient(90deg, var(--gmb-signal), transparent 55%);
	opacity: 0;
	transition: opacity var(--gmb-dur-state) ease;
}
.gmb-bay:hover {
	transform: translateY(-4px);
	border-color: var(--gmb-signal-a40);
	box-shadow: var(--gmb-bevel), var(--gmb-glow-signal);
}
.gmb-bay:hover::after { opacity: 1; }
.gmb-bay:hover .gmb-glyph { color: var(--gmb-ink); }

.gmb-bay__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--gmb-space-3);
}
.gmb-bay__designation {
	font-family: var(--gmb-font-mono);
	font-size: var(--gmb-text-2xs);
	font-weight: 500;
	letter-spacing: 0.18em;
	color: var(--gmb-signal);
}
.gmb-bay__glyph { padding-block: var(--gmb-space-2); }
.gmb-bay__body { display: flex; flex-direction: column; gap: var(--gmb-space-3); flex: 1; }
.gmb-bay__name { font-size: var(--gmb-text-xl); font-weight: 800; letter-spacing: -0.02em; line-height: 1.05; }
.gmb-bay__role { color: var(--gmb-ink-soft); font-size: var(--gmb-text-sm); line-height: 1.5; margin: 0; }
.gmb-bay__blurb { color: var(--gmb-ink-soft); font-size: var(--gmb-text-sm); line-height: 1.6; margin: 0; }
.gmb-bay__body .gmb-spec { margin-top: auto; }

.gmb-bay__foot {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--gmb-space-3);
	padding-top: var(--gmb-space-4);
	border-top: 1px solid var(--gmb-line);
}
.gmb-bay__price {
	font-family: var(--gmb-font-mono);
	font-size: var(--gmb-text-2xs);
	font-weight: 500;
	letter-spacing: 0.06em;
	color: var(--gmb-ink-mute);
}
.gmb-bay__actions { display: inline-flex; align-items: center; gap: var(--gmb-space-4); }
.gmb-bay__add { padding: 0.5rem 1.1rem; font-size: var(--gmb-text-2xs); }

/* Featured bay -- larger glyph, spans two console columns (grid handles span). */
.gmb-bay--featured { grid-column: span 2; }
.gmb-bay--featured .gmb-glyph { width: 60px; height: 60px; }
.gmb-bay--featured .gmb-bay__name { font-size: var(--gmb-text-2xl); }

/* Console grid -- the asymmetric instrument bank. Reused by the ecosystem
   section and the catalog. auto-fit keeps it breakpoint-free; the featured
   bay spans two columns where the grid is wide enough. */
.gmb-console {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(264px, 1fr));
	gap: var(--gmb-space-5);
}

/* ============================================================= Interactions */
/* Amber reticle cursor -- a subtle accent on fine pointers, positioned by GSAP
   (transform), centered by negative margin. Never required for function. */
.gmb-reticle {
	position: fixed;
	top: 0;
	left: 0;
	z-index: 200;
	width: 26px;
	height: 26px;
	margin: -13px 0 0 -13px;
	border: 1px solid var(--gmb-signal-a40);
	border-radius: 50%;
	pointer-events: none;
	opacity: 0;
	mix-blend-mode: screen;
	transition: opacity 0.25s ease, width 0.2s var(--gmb-ease-out-quart), height 0.2s var(--gmb-ease-out-quart), border-color 0.2s ease;
}
.gmb-reticle.is-visible { opacity: 1; }
.gmb-reticle.is-active { width: 46px; height: 46px; border-color: var(--gmb-signal); }
@media (pointer: coarse) { .gmb-reticle { display: none; } }

/* Menu toggle -> X when open */
.gmb-nav__toggle[aria-expanded="true"] .gmb-nav__bars span:first-child { transform: translateY(3.5px) rotate(45deg); }
.gmb-nav__toggle[aria-expanded="true"] .gmb-nav__bars span:last-child { transform: translateY(-3.5px) rotate(-45deg); }