/* components.css — Terminal snippet, buttons, feature items */

/* ---------- Buttons ---------- */

.btn {
	display: inline-flex;
	align-items: center;
	gap: var(--rv-space-8);
	padding: var(--rv-space-8) var(--rv-space-20);
	font-family: var(--rv-font-body);
	font-size: var(--rv-size-code);
	font-weight: var(--rv-weight-medium);
	line-height: 1.4;
	border-radius: var(--rv-radius-small);
	border: 1px solid transparent;
	cursor: pointer;
	transition: background var(--rv-duration-fast) var(--rv-easing-default), border-color
		var(--rv-duration-fast) var(--rv-easing-default), color var(--rv-duration-fast)
		var(--rv-easing-default);
	white-space: nowrap;
}

.btn--primary {
	background: var(--rv-color-accent);
	color: var(--rv-text-on-emphasis);
	border-color: var(--rv-color-accent);
}

.btn--primary:hover {
	background: var(--rv-accent-hover);
	border-color: var(--rv-accent-hover);
	color: var(--rv-text-on-emphasis);
}

.btn--ghost {
	background: transparent;
	color: var(--rv-text-primary);
	border-color: var(--rv-border);
}

.btn--ghost:hover {
	border-color: var(--rv-text-secondary);
	color: var(--rv-text-primary);
}

/* ---------- Terminal snippet ---------- */

.terminal {
	background: var(--rv-surface-secondary);
	border: 1px solid var(--rv-border);
	border-radius: var(--rv-radius-medium);
	overflow: hidden;
	width: 100%;
	min-width: 0;
}

.terminal__bar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: var(--rv-space-8) var(--rv-space-12);
	background: var(--rv-bg-muted);
	border-bottom: 1px solid var(--rv-border-muted);
}

.terminal__dots {
	display: flex;
	gap: 6px;
}

.terminal__dot {
	width: 8px;
	height: 8px;
	border-radius: var(--rv-radius-full);
	background: var(--rv-border);
}

.terminal__title {
	font-family: var(--rv-font-code);
	font-size: 11px;
	color: var(--rv-text-muted);
	letter-spacing: 0.02em;
}

.terminal__copy-btn {
	background: none;
	border: none;
	color: var(--rv-text-muted);
	cursor: pointer;
	font-family: var(--rv-font-code);
	font-size: 11px;
	padding: 2px var(--rv-space-8);
	border-radius: var(--rv-radius-small);
	transition: color var(--rv-duration-fast) var(--rv-easing-default);
}

.terminal__copy-btn:hover {
	color: var(--rv-text-primary);
}

.terminal__copy-btn--copied {
	color: var(--rv-color-success);
}

.terminal__body {
	padding: var(--rv-space-16) var(--rv-space-16);
	overflow-x: auto;
}

.terminal__line {
	display: flex;
	align-items: baseline;
	gap: var(--rv-space-8);
	white-space: nowrap;
}

.terminal__prompt {
	color: var(--rv-text-muted);
	font-family: var(--rv-font-code);
	font-size: 13px;
	user-select: none;
	flex-shrink: 0;
}

.terminal__cmd {
	font-family: var(--rv-font-code);
	font-size: 13px;
	color: var(--rv-text-primary);
}

.terminal__cmd .cmd-bin {
	color: var(--rv-color-accent);
}

.terminal__cmd .cmd-flag {
	color: var(--rv-text-muted);
}

.terminal__cmd .cmd-arg {
	color: var(--rv-text-secondary);
}

.terminal__output {
	font-family: var(--rv-font-code);
	font-size: 13px;
	color: var(--rv-text-muted);
	margin-top: var(--rv-space-4);
}

.terminal__output .output-ok {
	color: var(--rv-color-success);
}

/* ---------- Feature items ---------- */

.feature {
	padding: var(--rv-space-24) var(--rv-space-24) var(--rv-space-24) var(--rv-space-20);
	background: var(--rv-surface-secondary);
	border-radius: var(--rv-radius-medium);
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
}

.feature--large {
	padding: var(--rv-space-32) var(--rv-space-32) var(--rv-space-32) var(--rv-space-24);
}

.feature__label {
	font-family: var(--rv-font-code);
	font-size: 11px;
	font-weight: var(--rv-weight-medium);
	color: var(--rv-color-accent);
	letter-spacing: 0.04em;
	text-transform: uppercase;
	margin-bottom: var(--rv-space-8);
}

.feature__title {
	font-size: 18px;
	font-weight: var(--rv-weight-semibold);
	color: var(--rv-text-primary);
	margin-bottom: var(--rv-space-8);
}

.feature--large .feature__title {
	font-size: var(--rv-size-subtitle);
	letter-spacing: -0.01em;
}

.feature__desc {
	font-size: var(--rv-size-body);
	color: var(--rv-text-secondary);
	line-height: var(--rv-leading-body);
}

/* ---------- Badge (GitHub stars) ---------- */

.badge {
	display: inline-flex;
	align-items: center;
	gap: var(--rv-space-4);
	padding: var(--rv-space-4) var(--rv-space-12);
	border: 1px solid var(--rv-border);
	border-radius: var(--rv-radius-small);
	font-family: var(--rv-font-code);
	font-size: var(--rv-size-caption);
	color: var(--rv-text-secondary);
	text-decoration: none;
}

.badge:hover {
	border-color: var(--rv-text-muted);
	color: var(--rv-text-primary);
}

/* ---------- Keyboard shortcut ---------- */

.kbd {
	display: inline-block;
	padding: 1px 6px;
	font-family: var(--rv-font-code);
	font-size: 12px;
	color: var(--rv-text-secondary);
	background: var(--rv-bg-muted);
	border: 1px solid var(--rv-border);
	border-radius: var(--rv-radius-small);
	line-height: 1.6;
}