/**
 * RMM Drum Loop — front-end + editor styles.
 * Scoped to .rmm-drumloop so it drops cleanly onto any theme.
 */

.rmm-drumloop {
	--rmm-bg: #16213e;
	--rmm-accent: #e94560;
	--rmm-text: #eee;
	--rmm-muted: #9aa8c0;
	max-width: 820px;
	margin: 1.5rem auto;
	padding: 1rem 1.1rem 1.2rem;
	background: var(--rmm-bg);
	border-radius: 12px;
	color: var(--rmm-text);
	font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
	box-sizing: border-box;
}

.rmm-drumloop * {
	box-sizing: border-box;
}

.rmm-drumloop-title {
	font-size: 1.05rem;
	font-weight: 700;
	letter-spacing: 0.03em;
	margin-bottom: 0.8rem;
}

/* abcjs draws with fill:currentColor — force a clean black-on-white panel */
.rmm-drumloop-notation {
	background: #fff;
	color: #000;
	border-radius: 8px;
	padding: 0.6rem;
}

.rmm-drumloop-controls {
	display: flex;
	align-items: center;
	gap: 1.2rem;
	flex-wrap: wrap;
	margin-top: 0.9rem;
}

.rmm-drumloop-play {
	width: 54px;
	height: 54px;
	border-radius: 50%;
	border: none;
	cursor: pointer;
	background: var(--rmm-accent);
	color: #fff;
	font-size: 1.3rem;
	line-height: 1;
	flex: 0 0 auto;
	transition: transform 0.08s ease;
}

.rmm-drumloop-play:active {
	transform: scale(0.95);
}

.rmm-drumloop-tempo {
	display: flex;
	flex-direction: column;
	gap: 0.2rem;
}

.rmm-drumloop-tempo label {
	font-size: 0.7rem;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: var(--rmm-muted);
}

.rmm-drumloop-tempo-row {
	display: flex;
	align-items: center;
	gap: 0.6rem;
}

.rmm-drumloop-tempo input[type="range"] {
	width: 170px;
	accent-color: var(--rmm-accent);
}

.rmm-drumloop-tempo-val {
	font-size: 1.05rem;
	font-weight: 700;
	min-width: 64px;
}

.rmm-drumloop-status {
	font-size: 0.8rem;
	color: var(--rmm-muted);
}

/* editable mode — the live ABC textarea */
.rmm-drumloop-abc {
	display: none;
}

.rmm-drumloop--editable .rmm-drumloop-abc {
	display: block;
	width: 100%;
	min-height: 230px;
	resize: vertical;
	margin-top: 0.9rem;
	padding: 0.7rem;
	background: #0f3460;
	color: var(--rmm-text);
	border: 1px solid #2a3f6a;
	border-radius: 8px;
	font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
	font-size: 0.9rem;
	line-height: 1.5;
}

/* help block under the editor meta box */
.rmm-drumloop-help {
	margin-top: 0.8rem;
	font-size: 0.85rem;
	line-height: 1.6;
	color: #50575e;
}

.rmm-drumloop-help ul {
	margin: 0.3rem 0 0;
	padding-left: 1.1rem;
}

.rmm-drumloop-help code,
.rmm-drumloop-tempo-field code {
	background: #f0f0f1;
	padding: 0.05rem 0.32rem;
	border-radius: 4px;
	font-size: 0.85em;
}

.rmm-drumloop-tempo-field {
	margin-top: 0.8rem;
}

.rmm-drumloop-tempo-field input[type="number"] {
	width: 80px;
}