/* Scoped to the new controls; song typography and layout remain in frontend-style.css. */
.rechord-transpose {
	display: flex;
	align-items: center;
	justify-content: flex-start;
	flex-wrap: wrap;
	gap: 10px;
	margin: 0 0 12px;
	font-family: inherit;
	font-size: 16px;
	line-height: 1.4;
	color: #5c3462;
}

.rechord-transpose .rechord-transpose-title { font-weight: 600; }
.rechord-transpose .rechord-transpose-controls {
	display: inline-flex;
	align-items: center;
	gap: 6px;
}

.rechord-transpose button,
.rechord-transpose select {
	box-sizing: border-box;
	min-height: 44px;
	margin: 0;
	border: 1px solid #d2bbd7;
	border-radius: 22px;
	background: #fff;
	color: #5c3462;
	font-family: inherit;
	font-size: 16px;
	font-weight: 600;
	line-height: 1.2;
	letter-spacing: normal;
	text-transform: none;
	box-shadow: none;
	cursor: pointer;
}

.rechord-transpose button { min-width: 44px; padding: 8px 12px; }
.rechord-transpose .rechord-transpose-down,
.rechord-transpose .rechord-transpose-up { background: #eee5f3; font-size: 22px; }
.rechord-transpose select {
	appearance: auto;
	-webkit-appearance: auto;
	background-image: none;
	width: 110px;
	max-width: 100%;
	padding: 8px;
	direction: ltr;
	text-align: center;
}
.rechord-transpose button:hover:not(:disabled) { background: #e3d4ea; }
.rechord-transpose button:disabled { opacity: 0.4; cursor: default; }
.rechord-transpose button:focus-visible,
.rechord-transpose select:focus-visible { outline: 2px solid #5c3462; outline-offset: 3px; }
.rechord-transpose .rechord-transpose-status {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}
@media (max-width: 767px) {
	.rechord-transpose .rechord-transpose-title { flex-basis: 100%; }
}
@media print { .rechord-transpose { display: none; } }