/**
 * Styles the limited button system shared by all page actions.
 *
 * One gold signal treatment establishes the primary conversion path; secondary
 * actions deliberately stay quieter to protect that hierarchy.
 */

.button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--inv-space-xs);
	min-height: 3.25rem;
	padding: 0.8rem 1.25rem;
	border: 1px solid transparent;
	border-radius: var(--inv-radius-pill);
	font-family: var(--inv-font-mono);
	font-size: 0.7rem;
	font-weight: 700;
	letter-spacing: 0.06em;
	line-height: 1;
	text-transform: uppercase;
	transition: transform var(--inv-duration-fast) var(--inv-ease), background var(--inv-duration-fast) var(--inv-ease), border-color var(--inv-duration-fast) var(--inv-ease), color var(--inv-duration-fast) var(--inv-ease);
}

.button:hover {
	transform: translateY(-0.1875rem);
}

.button svg {
	width: 1rem;
	height: 1rem;
	fill: none;
	stroke: currentColor;
	stroke-linecap: round;
	stroke-linejoin: round;
	stroke-width: 1.8;
}

.button--primary {
	background: var(--inv-signal);
	color: var(--inv-ink);
}

.button--primary:hover {
	background: var(--inv-signal-deep);
}

.button--text {
	padding-inline: 0;
	border-color: transparent;
	background: transparent;
	color: var(--inv-text-inv);
}

.button--text:hover {
	color: var(--inv-signal);
}

/* Quiet bordered action for dark grounds (404, character reel). Individual page
   stylesheets may override the palette; this is the shared default. */
.button--outline {
	border-color: var(--inv-line-inv);
	background: transparent;
	color: var(--inv-text-inv);
}

.button--outline:hover {
	border-color: var(--inv-signal);
	color: var(--inv-signal);
}

.button__play {
	display: grid;
	place-items: center;
	width: 1.8rem;
	height: 1.8rem;
	border: 1px solid var(--inv-line-inv);
	border-radius: 50%;
}

.button__play svg {
	width: 0.72rem;
	height: 0.72rem;
	fill: currentColor;
	stroke: none;
}

.button--header {
	min-height: 2.6rem;
	padding-inline: var(--inv-space-sm);
	border-color: var(--inv-line-inv);
	color: var(--inv-text-inv);
	font-size: 0.625rem;
}

/* The gold fill and the ink label are one state — never let one apply without
   the other, or the button reads as a blank gold pill. Also covers /start/,
   where the CTA carries aria-current. */
.button--header:hover,
.button--header[aria-current] {
	border-color: var(--inv-signal);
	background: var(--inv-signal);
	color: var(--inv-ink);
}