/* MTR Chords — chord chart styling
 * Targets the real class names ChordSheetJS's HtmlDivFormatter emits
 * (verified via a Node render, not guessed): .title, .subtitle,
 * .chord-sheet, .paragraph (+ .verse/.chorus), .row, .column, .chord,
 * .lyrics, .comment. Everything is scoped under .mtr-chords so it can't
 * leak into the rest of the theme.
 *
 * The whole point of this file: never collapse a .row. Each .row is one
 * line from the original ChordPro text — that 1:1 mapping is what keeps
 * line breaks intact, unlike the old ChordPress plugin.
 */

.mtr-chords {
	--mtr-text: #23282d;
	--mtr-muted: #6b7280;
	--mtr-chord: #a6410c;
	--mtr-accent: #a6410c;
	--mtr-border: #e2e2e2;
	--mtr-bg-toolbar: #f6f7f7;
	--mtr-bg-section: transparent;
	--mtr-bg-page: #ffffff;

	max-width: 46em;
	margin: 1.5em 0;
	color: var(--mtr-text);
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

@media (prefers-color-scheme: dark) {
	.mtr-chords {
		--mtr-text: #e5e5e5;
		--mtr-muted: #9a9a9a;
		--mtr-chord: #ff9d5c;
		--mtr-accent: #ff9d5c;
		--mtr-border: #3a3a3a;
		--mtr-bg-toolbar: #26282b;
		--mtr-bg-page: #141414;
	}
}

.mtr-chords .title {
	font-size: 1.5em;
	font-weight: 700;
	margin: 0 0 0.15em;
	line-height: 1.2;
}

.mtr-chords .subtitle {
	font-size: 0.95em;
	font-weight: 400;
	color: var(--mtr-muted);
	margin: 0 0 0.6em;
}

.mtr-chords-meta {
	display: flex;
	flex-wrap: wrap;
	gap: 0.4em;
	margin-bottom: 0.9em;
}

.mtr-chords-meta span {
	display: inline-block;
	font-size: 0.8em;
	font-weight: 600;
	letter-spacing: 0.02em;
	color: var(--mtr-muted);
	background: var(--mtr-bg-toolbar);
	border: 1px solid var(--mtr-border);
	border-radius: 4px;
	padding: 0.15em 0.6em;
}

/* --- Toolbar: transpose + reset + stage mode --- */
.mtr-chords-toolbar {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.5em;
	background: var(--mtr-bg-toolbar);
	border: 1px solid var(--mtr-border);
	border-radius: 6px;
	padding: 0.5em 0.7em;
	margin-bottom: 1.1em;
}

.mtr-chords-toolbar .mtr-chords-label {
	font-size: 0.85em;
	color: var(--mtr-muted);
	margin-right: 0.2em;
}

.mtr-chords-toolbar button {
	font: inherit;
	font-weight: 700;
	cursor: pointer;
	border: 1px solid var(--mtr-border);
	background: #fff;
	color: var(--mtr-text);
	border-radius: 4px;
	width: 2em;
	height: 2em;
	line-height: 1;
	display: inline-flex;
	align-items: center;
	justify-content: center;
}

@media (prefers-color-scheme: dark) {
	.mtr-chords-toolbar button {
		background: #333;
	}
}

.mtr-chords-toolbar button:hover {
	border-color: var(--mtr-accent);
	color: var(--mtr-accent);
}

.mtr-chords-toolbar button.mtr-chords-reset,
.mtr-chords-toolbar button.mtr-chords-stage-toggle {
	width: auto;
	padding: 0 0.8em;
	font-weight: 600;
	font-size: 0.85em;
}

.mtr-chords-toolbar button.mtr-chords-stage-toggle {
	margin-left: auto;
}

.mtr-chords-current-key {
	min-width: 2.2em;
	text-align: center;
	font-weight: 700;
	color: var(--mtr-accent);
}

/* --- The chord sheet itself --- */
.mtr-chords .chord-sheet {
	font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
	font-size: 1.02em;
	line-height: 1.5;
}

/* One section (verse/chorus/bridge/etc). The left accent bar + spacing is
   what makes sections visually separable at a glance, which is most of
   what "readable" means for a chart someone is sight-reading live. */
.mtr-chords .paragraph {
	margin: 0 0 1.3em;
	padding-left: 0.8em;
	border-left: 3px solid var(--mtr-border);
}

.mtr-chords .paragraph.chorus {
	border-left-color: var(--mtr-accent);
}

.mtr-chords .paragraph.verse {
	border-left-color: var(--mtr-border);
}

/* Section label, e.g. "Bridge 1a" from a bare {comment: ...} directive */
.mtr-chords .comment {
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	font-size: 0.78em;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: var(--mtr-muted);
	margin-bottom: 0.35em;
}

/* One .row per source line — never collapse, never display:inline this.
   align-items is flex-start (top-aligned), not flex-end/baseline: a chord
   with no trailing lyric (e.g. one at the very end of a line) must still
   sit on the chord line above where the next word would start, not sink
   down to the lyric baseline. Top-aligning every column is what keeps the
   whole row's chords on one line and lyrics on the line beneath, no matter
   which individual columns have an empty chord or an empty lyric. */
.mtr-chords .row {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	min-height: 1em;
}

/* One chord + the lyric fragment that follows it, stacked. */
.mtr-chords .column {
	display: inline-flex;
	flex-direction: column;
	align-items: flex-start;
	white-space: pre-wrap;
}

.mtr-chords .chord {
	color: var(--mtr-chord);
	font-weight: 700;
	min-height: 1.3em;
	line-height: 1.3em;
}

.mtr-chords .lyrics {
	white-space: pre-wrap;
}

/* A row that's only a section label (the .comment lives directly in the
   .row with no .column) shouldn't reserve chord-line height. */
.mtr-chords .row:has(> .comment) {
	min-height: 0;
}

.mtr-chords-empty-notice {
	font-size: 0.9em;
	color: var(--mtr-muted);
	border: 1px dashed var(--mtr-border);
	border-radius: 6px;
	padding: 0.8em 1em;
}

@media (max-width: 480px) {
	.mtr-chords .chord-sheet {
		font-size: 0.92em;
	}
}

/* --- Stage Mode: full-screen, zoomed-in view for reading a chart live off
   a tablet. The .mtr-chords-controls wrapper (toolbar + meta badges) moves
   into this overlay while it's open — same DOM nodes, same event
   listeners, so transpose/reset/current-key all keep working exactly as
   before. Everything else on the page (title, intro text, CCLI credits,
   recordings, theme header/footer, etc.) is simply hidden behind it,
   because this covers the whole viewport. */
.mtr-chords-stage-overlay {
	position: fixed;
	inset: 0;
	z-index: 999999;
	background: var(--mtr-bg-page);
	overflow-y: auto;
	max-width: none;
	margin: 0;
	padding: 3.5em 1.2em 2.5em;
	box-sizing: border-box;
}

body.mtr-chords-stage-open {
	overflow: hidden;
}

.mtr-chords-stage-overlay .mtr-chords-controls {
	max-width: 60em;
	margin: 0 auto 1em;
}

.mtr-chords-stage-overlay .mtr-chords-output {
	max-width: 60em;
	margin: 0 auto;
}

/* Stage Mode's whole point: bigger, easier to read at arm's length. */
.mtr-chords-stage-overlay .chord-sheet {
	font-size: 1.85em;
	line-height: 1.6;
}

.mtr-chords-stage-overlay .title {
	font-size: 2em;
}

@media (max-width: 700px) {
	.mtr-chords-stage-overlay .chord-sheet {
		font-size: 1.4em;
	}
}

.mtr-chords-stage-exit {
	position: fixed;
	top: 0.7em;
	left: 0.7em;
	z-index: 1000000;
	width: 2.4em;
	height: 2.4em;
	border-radius: 50%;
	border: 1px solid var(--mtr-border);
	background: var(--mtr-bg-toolbar);
	color: var(--mtr-text);
	font-size: 1.4em;
	line-height: 1;
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	justify-content: center;
}

.mtr-chords-stage-exit:hover {
	border-color: var(--mtr-accent);
	color: var(--mtr-accent);
}

/* The song-order code, e.g. "V-V-Ch-V-Ch-B-Ch" — a quick-glance map of the
   song's structure, fixed in the top-right corner so it stays visible no
   matter how far you've scrolled down the chart. Hidden entirely (via the
   JS never rendering it) for the handful of songs with no Verse/Chorus
   section markers at all — showing an empty badge would be more confusing
   than showing nothing. */
.mtr-chords-order-code {
	position: fixed;
	top: 0.7em;
	right: 0.7em;
	z-index: 1000000;
	background: var(--mtr-bg-toolbar);
	border: 1px solid var(--mtr-border);
	border-radius: 999px;
	padding: 0.4em 0.9em;
	font-weight: 700;
	font-size: 0.95em;
	letter-spacing: 0.02em;
	color: var(--mtr-accent);
	max-width: 55vw;
	overflow-wrap: break-word;
	text-align: right;
}