/**
 * FTM Instruments — lesson-page styles.
 * Scoped via .ftm-anatomy, .ftm-block*, .ftm-lesson-header, .ftm-checklist.
 * Loaded on singular ftm_lesson + ftm_instrument archive pages.
 */

/* ============================================================
   LESSON HEADER STRIP — phase / duration / instrument pills.
   Prepended to the_content above the body.
   ============================================================ */
.ftm-lesson-header {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 10px auto 24px;
	max-width: 760px;
	padding: 0 20px;
	font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
}
.ftm-lesson-pill {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 5px 12px;
	border-radius: 999px;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.02em;
	background: rgba(26, 39, 71, 0.06);
	color: #2E3C63;
}
.ftm-lesson-pill--instrument {
	background: var(--ftm-lesson-accent, #1A2747);
	color: #FAFAF6;
}
.ftm-lesson-pill--phase {
	background: #FFFFFF;
	color: #1A2747;
	border: 1px solid rgba(26, 39, 71, 0.12);
}
.ftm-lesson-pill--duration svg { opacity: 0.75; }
.ftm-lesson-dot {
	width: 6px; height: 6px;
	border-radius: 50%;
	background: #FFFFFF;
	opacity: 0.9;
}

/* ============================================================
   LESSON TYPOGRAPHY — apply to .single-ftm_lesson body content.
   (Relies on the theme's .entry-content wrapper. If your theme
    uses a different class, the plugin also styles h1/h2/h3/p/ul
    that sit alongside the .ftm-lesson-header so it still improves.)
   ============================================================ */
.single-ftm_lesson .entry-content,
.single-ftm_lesson article,
.single-ftm_lesson .post-content {
	font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
	font-size: 17px;
	line-height: 1.68;
	color: #1A2747;
	max-width: 760px;
	margin: 0 auto;
	padding: 0 20px 80px;
}
.single-ftm_lesson .entry-content h1,
.single-ftm_lesson article h1,
.single-ftm_lesson .entry-title {
	font-family: 'Prequel', 'Playfair Display', Georgia, serif !important;
	font-weight: 400 !important;
	font-size: clamp(40px, 6vw, 56px);
	line-height: 1.05;
	margin: 0 0 16px;
	letter-spacing: 0.01em;
	color: #1A2747;
}
.single-ftm_lesson .entry-content h2,
.single-ftm_lesson article h2,
.single-ftm_lesson .post-content h2 {
	font-family: 'Prequel', 'Playfair Display', Georgia, serif !important;
	font-weight: 400 !important;
	font-size: clamp(26px, 3.4vw, 34px);
	line-height: 1.15;
	margin: 44px 0 14px;
	color: #1A2747;
}
.single-ftm_lesson .entry-content h3,
.single-ftm_lesson article h3,
.single-ftm_lesson .post-content h3 {
	font-family: 'Inter', sans-serif;
	font-weight: 700;
	font-size: 20px;
	margin: 28px 0 10px;
	color: #1A2747;
}
.single-ftm_lesson .entry-content p,
.single-ftm_lesson article p {
	margin: 0 0 18px;
}
/* First-paragraph lift */
.single-ftm_lesson .entry-content > p:first-of-type,
.single-ftm_lesson article > p:first-of-type {
	font-size: 19px;
	line-height: 1.6;
	color: #2E3C63;
}
.single-ftm_lesson .entry-content ul,
.single-ftm_lesson article ul {
	padding-left: 1.2em;
	margin: 0 0 22px;
}
.single-ftm_lesson .entry-content ul li,
.single-ftm_lesson article ul li {
	margin: 6px 0;
}
.single-ftm_lesson .entry-content strong {
	color: #1A2747;
	font-weight: 700;
}
.single-ftm_lesson .entry-content em,
.single-ftm_lesson article em {
	color: #2E3C63;
}

/* ============================================================
   BLOCK COMPONENTS — exercise, key_idea, reflection, checklist.
   ============================================================ */
.ftm-block {
	position: relative;
	margin: 32px auto;
	max-width: 760px;
	padding: 22px 26px;
	border-radius: 16px;
	background: #FFFFFF;
	border: 1px solid #E4E8EE;
	box-shadow: 0 1px 2px rgba(26,39,71,.05), 0 4px 12px rgba(26,39,71,.04);
	font-family: 'Inter', sans-serif;
}
.ftm-block::before {
	content: "";
	position: absolute;
	top: 0; left: 20px; right: 20px;
	height: 4px;
	border-radius: 999px;
	background: linear-gradient(90deg,
		#E94E3D 0%, #F2883A 16%, #F2C544 32%, #6FB24A 48%,
		#3DA3B5 64%, #3B6FB8 80%, #7E4BA8 100%);
}
.ftm-block__tag {
	display: inline-block;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: #6B7280;
	margin-bottom: 8px;
}
.ftm-block__body {
	color: #1A2747;
	line-height: 1.6;
}
.ftm-block__body p:first-child { margin-top: 0; }
.ftm-block__body p:last-child  { margin-bottom: 0; }

/* Exercise: cream background, a bit warmer */
.ftm-block--exercise {
	background: #F6F3EC;
	border-color: #EAD9B4;
}
.ftm-block--exercise .ftm-block__tag { color: #B77612; }

/* Key idea: pull-quote style.
   Extra !important here because WP themes commonly force blockquote text
   to muted-gray italic via .entry-content blockquote selectors which beat
   our class specificity. */
.ftm-block--key-idea {
	background: #1A2747 !important;
	color: #F6F3EC !important;
	border: 0 !important;
	padding: 34px 32px 28px !important;
	font-style: normal !important;
}
.ftm-block--key-idea::before {
	height: 5px;
	top: 0;
}
.ftm-block--key-idea .ftm-block__body,
.ftm-block--key-idea .ftm-block__body p,
.ftm-block--key-idea .ftm-block__body strong,
.ftm-block--key-idea .ftm-block__body em {
	color: #F6F3EC !important;
	font-family: 'Prequel', 'Playfair Display', Georgia, serif !important;
	font-weight: 400 !important;
	font-style: normal !important;
	font-size: clamp(20px, 2.6vw, 28px);
	line-height: 1.3;
	opacity: 1 !important;
}
.ftm-block--key-idea .ftm-block__quote-mark {
	font-family: 'Prequel', 'Playfair Display', Georgia, serif !important;
	font-size: 64px !important;
	line-height: 0.3 !important;
	color: #F2B230 !important;
	margin-bottom: 14px;
	display: block;
	opacity: 1 !important;
}

/* Reflection: subtle gold accent, feels invitational */
.ftm-block--reflection {
	background: #FFFBF0;
	border-color: #F2D7A4;
}
.ftm-block--reflection::before {
	background: linear-gradient(90deg, #F2B230 0%, #F2883A 50%, #E94E3D 100%);
}
.ftm-block--reflection .ftm-block__tag { color: #8A6100; }

/* ============================================================
   CHECKLIST — tickable items for body-scan / tension checks.
   ============================================================ */
.ftm-checklist {
	list-style: none;
	padding: 0;
	margin: 4px 0 0;
}
.ftm-checklist__item {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	margin: 8px 0;
}
.ftm-checklist__box {
	width: 20px; height: 20px;
	margin-top: 1px;
	accent-color: #E94E3D;
	cursor: pointer;
	flex-shrink: 0;
}
.ftm-checklist__label {
	font-size: 15px;
	color: #1A2747;
	cursor: pointer;
	transition: color .15s ease, text-decoration-color .15s ease;
}
.ftm-checklist__box:checked + .ftm-checklist__label {
	color: #6B7280;
	text-decoration: line-through;
	text-decoration-thickness: 2px;
	text-decoration-color: rgba(107, 114, 128, 0.55);
}

/* ============================================================
   ANATOMY WIDGET — interactive SVG with hover labels + panel.
   ============================================================ */
.ftm-anatomy {
	margin: 36px auto;
	max-width: 760px;
	padding: 22px;
	border-radius: 16px;
	background: #F6F3EC;
	border: 1px solid #E4E8EE;
	box-shadow: 0 1px 2px rgba(26,39,71,.05);
	font-family: 'Inter', sans-serif;
}
.ftm-anatomy__header {
	margin-bottom: 10px;
}
.ftm-anatomy__kicker {
	display: block;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: #6B7280;
}
.ftm-anatomy__help {
	margin: 4px 0 0;
	font-size: 13px;
	color: #6B7280;
}
.ftm-anatomy__stage {
	position: relative;
	background: #FFFFFF;
	border-radius: 12px;
	padding: 20px 14px 28px;
	margin-top: 12px;
}
.ftm-anatomy__svg {
	width: 100%;
	height: auto;
	display: block;
}
.ftm-anatomy__label {
	position: absolute;
	bottom: 8px; left: 50%;
	transform: translateX(-50%);
	background: #1A2747;
	color: #F6F3EC;
	font-size: 13px;
	font-weight: 600;
	padding: 4px 12px;
	border-radius: 999px;
	opacity: 0;
	transition: opacity .15s ease;
	pointer-events: none;
}
.ftm-anatomy__label.is-visible { opacity: 1; }

/* Each labelled part: subtle hover/focus highlight */
.ftm-anatomy__part {
	cursor: pointer;
	outline: none;
	transition: filter .15s ease, opacity .15s ease;
}
.ftm-anatomy__part:hover,
.ftm-anatomy__part:focus {
	filter: drop-shadow(0 0 6px rgba(242, 178, 48, 0.85)) brightness(1.07);
}
.ftm-anatomy__part.is-active {
	filter: drop-shadow(0 0 8px rgba(233, 78, 61, 0.9)) brightness(1.1);
}

/* Detail panel — slides in under the stage when a part is clicked */
.ftm-anatomy__panel {
	margin-top: 16px;
	padding: 18px 22px 16px;
	background: #FFFFFF;
	border: 1px solid #E4E8EE;
	border-radius: 12px;
	box-shadow: 0 4px 12px rgba(26,39,71,.06);
	position: relative;
	display: none;
}
.ftm-anatomy__panel.is-open { display: block; animation: ftm-anatomy-fade .25s ease; }
@keyframes ftm-anatomy-fade {
	from { opacity: 0; transform: translateY(6px); }
	to   { opacity: 1; transform: translateY(0); }
}
.ftm-anatomy__close {
	position: absolute;
	top: 8px; right: 10px;
	background: transparent;
	border: 0;
	font-size: 22px;
	line-height: 1;
	color: #6B7280;
	cursor: pointer;
	padding: 4px 8px;
	border-radius: 4px;
}
.ftm-anatomy__close:hover { color: #1A2747; background: rgba(26,39,71,0.06); }
.ftm-anatomy__panel-title {
	font-family: 'Prequel', 'Playfair Display', Georgia, serif !important;
	font-weight: 400 !important;
	font-size: 22px;
	margin: 0 0 8px;
	color: #1A2747;
}
.ftm-anatomy__panel-body {
	margin: 0;
	font-size: 15px;
	line-height: 1.6;
	color: #2E3C63;
}

/* Hide the JSON data node */
.ftm-anatomy__data { display: none; }

@media (max-width: 768px) {
	.ftm-anatomy        { padding: 16px; }
	.ftm-anatomy__stage { padding: 12px 6px 20px; }
	.ftm-block          { padding: 18px 20px; margin: 22px auto; }

	/* Mobile full-width fix (v1.4.3 — fixed selectors).
	   v1.4.2's selectors targeted .entry-content / article / .post-content,
	   but the FTM custom theme uses .ftm-post / .ftm-container--narrow /
	   .ftm-site__main. Targeting the actual theme classes plus a wider
	   ≤768 breakpoint catches every phone size. */
	html, body { overflow-x: hidden; }

	/* Force the FTM theme's site/main/container chain to span full
	   viewport width on mobile.

	   Critical: BODY is display:flex/row (theme), so .ftm-site is a flex
	   child sized to its own max-content. <pre> blocks in chord lessons
	   have white-space: pre and their max-content is ~450px, which
	   collapses .ftm-site to that width. The fix is `flex: 1 1 100%` to
	   make site grow to fill body, plus `min-width: 0` everywhere so
	   descendants can't push columns wide via intrinsic sizing. */
	.single-ftm_lesson .ftm-site,
	.tax-ftm_instrument .ftm-site {
		flex: 1 1 100% !important;
		flex-grow: 1 !important;
		width: 100% !important;
		max-width: 100% !important;
		min-width: 0 !important;
		margin-left: 0 !important;
		margin-right: 0 !important;
		box-sizing: border-box;
	}
	.single-ftm_lesson .ftm-site__main,
	.single-ftm_lesson .ftm-container,
	.single-ftm_lesson .ftm-container--narrow,
	.tax-ftm_instrument .ftm-site__main,
	.tax-ftm_instrument .ftm-container,
	.tax-ftm_instrument .ftm-container--narrow {
		width: 100% !important;
		max-width: 100% !important;
		min-width: 0 !important;
		margin-left: 0 !important;
		margin-right: 0 !important;
		box-sizing: border-box;
	}

	/* Critical: descendants of flex columns inherit the column's width
	   limit only if they have min-width: 0. Without this, a long <pre>
	   line or a wide chord SVG can blow up its ancestor flex column
	   beyond the viewport. */
	.single-ftm_lesson .ftm-post,
	.single-ftm_lesson .ftm-post__content,
	.single-ftm_lesson .ftm-post__title,
	.single-ftm_lesson .ftm-post__meta,
	.single-ftm_lesson .ftm-block,
	.single-ftm_lesson .ftm-block__body,
	.single-ftm_lesson article,
	.tax-ftm_instrument .ftm-post,
	.tax-ftm_instrument article {
		min-width: 0 !important;
	}

	.single-ftm_lesson .ftm-container,
	.single-ftm_lesson .ftm-container--narrow,
	.tax-ftm_instrument .ftm-container,
	.tax-ftm_instrument .ftm-container--narrow {
		padding-left: 14px !important;
		padding-right: 14px !important;
	}

	/* The article itself fills its parent (.ftm-container--narrow) */
	.single-ftm_lesson .ftm-post,
	.single-ftm_lesson article.ftm_lesson,
	.single-ftm_lesson article,
	.tax-ftm_instrument .ftm-post,
	.tax-ftm_instrument article {
		width: 100% !important;
		max-width: 100% !important;
		margin-left: 0 !important;
		margin-right: 0 !important;
		padding-left: 0 !important;
		padding-right: 0 !important;
		box-sizing: border-box;
	}

	/* Standard WP fallbacks (in case theme changes) */
	.single-ftm_lesson .entry-content,
	.single-ftm_lesson .post-content,
	.tax-ftm_instrument .entry-content {
		width: 100% !important;
		max-width: 100% !important;
		padding-left: 0 !important;
		padding-right: 0 !important;
		box-sizing: border-box;
	}

	.single-ftm_lesson .ftm-post__title,
	.single-ftm_lesson .entry-title,
	.single-ftm_lesson h1.entry-title {
		padding-left: 0;
		padding-right: 0;
		box-sizing: border-box;
		font-size: clamp(28px, 7vw, 40px) !important;
		line-height: 1.1;
	}

	/* All FTM cards/blocks/widgets fill the available content width. */
	.ftm-block,
	.ftm-lesson-header,
	.ftm-anatomy,
	.ftm-tool,
	.ftm-crumbs,
	.ftm-inst-progression,
	.ftm-inst-tool-stub,
	.ftm-inst-lesson-nav,
	.ftm-inst-lesson-nav__row {
		width: 100%;
		max-width: 100%;
		margin-left: 0 !important;
		margin-right: 0 !important;
		box-sizing: border-box;
	}
	.ftm-block::before {
		left: 16px;
		right: 16px;
	}
	.ftm-block--key-idea {
		padding: 26px 20px 22px !important;
	}

	/* Lesson-nav row: prev/center/next stacks on narrow viewports so
	   the prev and next buttons aren't cut off. */
	.ftm-inst-lesson-nav__row {
		display: grid !important;
		grid-template-columns: 1fr !important;
		gap: 8px !important;
	}
	.ftm-inst-lesson-nav__row .ftm-inst-btn {
		display: block;
		width: 100%;
		text-align: center;
		box-sizing: border-box;
		white-space: normal;
	}

	/* Chord diagrams: smaller + center-row so multiple fit per line, and
	   the row spans the full container width. */
	.ftm-inst-chord {
		padding: 8px 6px 10px;
	}
	.ftm-inst-chord--md .ftm-inst-chord__svg { width: 110px; }
	.ftm-inst-chord--lg .ftm-inst-chord__svg { width: 140px; }
	.ftm-inst-chord--sm .ftm-inst-chord__svg { width: 80px; }

	/* When multiple chord widgets sit in a row, center them and let them
	   wrap evenly. */
	.ftm-post p:has(.ftm-inst-chord),
	.entry-content > p:has(.ftm-inst-chord),
	.ftm-block__body > p:has(.ftm-inst-chord) {
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
		gap: 8px;
	}

	/* Progression strip: chord steps stretch and wrap. */
	.ftm-inst-progression__row {
		justify-content: center;
		gap: 6px;
	}
	.ftm-inst-progression__step {
		flex: 1 1 auto;
		min-width: 0;
	}

	pre {
		overflow-x: auto;
		max-width: 100%;
		white-space: pre-wrap;
		word-break: break-word;
		font-size: 0.82em;
	}
}

/* Even tighter on iPhone-mini-class viewports */
@media (max-width: 380px) {
	.ftm-inst-chord--md .ftm-inst-chord__svg { width: 96px; }
	.ftm-inst-chord--lg .ftm-inst-chord__svg { width: 120px; }
	.ftm-block { padding: 14px 14px; }
}

@media (prefers-reduced-motion: reduce) {
	.ftm-anatomy__panel.is-open,
	.ftm-anatomy__label { animation: none; transition: none; }
}

/* ============================================================
   SHARED TOOL WIDGET CHROME (metronome + tuner)
   ============================================================ */
.ftm-tool {
	margin: 32px auto;
	max-width: 600px;
	padding: 24px;
	border-radius: 16px;
	background: #F6F3EC;
	border: 1px solid #E4E8EE;
	box-shadow: 0 1px 2px rgba(26,39,71,.05), 0 4px 12px rgba(26,39,71,.04);
	font-family: 'Inter', sans-serif;
}
.ftm-tool__header { text-align: center; margin-bottom: 14px; }
.ftm-tool__kicker {
	display: block;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: #6B7280;
}
.ftm-tool__help {
	margin: 4px 0 0;
	font-size: 13px;
	color: #6B7280;
}
.ftm-tool__stage {
	background: #FFFFFF;
	border-radius: 12px;
	padding: 24px 20px 22px;
	text-align: center;
}
.ftm-tool__note {
	margin: 14px 0 0;
	font-size: 13px;
	color: #6B7280;
	font-style: italic;
}

/* ============================================================
   METRONOME
   ============================================================ */
.ftm-met__pulse {
	display: flex;
	justify-content: center;
	gap: 14px;
	margin-bottom: 20px;
}
.ftm-met__dot {
	width: 16px; height: 16px;
	border-radius: 50%;
	background: #E4E8EE;
	transition: background .08s ease, transform .08s ease;
}
.ftm-met__dot[data-beat="1"] {
	background: #E4E8EE;
	box-shadow: inset 0 0 0 2px rgba(26,39,71,0.15);
}
.ftm-met__dot.is-active {
	background: #E94E3D;
	transform: scale(1.3);
}
.ftm-met__dot[data-beat="1"].is-active {
	background: #1A2747;
}

.ftm-met__tempo-row {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	margin-bottom: 16px;
}
.ftm-met__nudge {
	width: 38px; height: 38px;
	border-radius: 999px;
	border: 1px solid #D8DCE4;
	background: #FFFFFF;
	color: #1A2747;
	font-weight: 700;
	cursor: pointer;
	font-family: inherit;
	transition: background .15s ease;
}
.ftm-met__nudge:hover { background: #F6F3EC; }
.ftm-met__tempo-display {
	display: flex;
	flex-direction: column;
	align-items: center;
	min-width: 110px;
}
.ftm-met__tempo-input {
	width: 90px;
	padding: 6px 8px;
	border: 1px solid #D8DCE4;
	border-radius: 6px;
	font-family: 'Prequel', 'Playfair Display', Georgia, serif;
	font-size: 34px;
	text-align: center;
	color: #1A2747;
	background: #FFFFFF;
	-moz-appearance: textfield;
}
.ftm-met__tempo-input::-webkit-outer-spin-button,
.ftm-met__tempo-input::-webkit-inner-spin-button {
	-webkit-appearance: none; margin: 0;
}
.ftm-met__tempo-label {
	font-size: 11px;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: #6B7280;
	font-weight: 700;
	margin-top: 2px;
}

.ftm-met__options {
	display: flex;
	justify-content: center;
	gap: 18px;
	margin-bottom: 20px;
}
.ftm-met__option {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 4px;
	font-size: 11px;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: #6B7280;
	font-weight: 700;
}
.ftm-met__option select {
	padding: 5px 8px;
	border: 1px solid #D8DCE4;
	border-radius: 6px;
	font-size: 13px;
	background: #FFFFFF;
	color: #1A2747;
	font-family: inherit;
	font-weight: 500;
	text-transform: none;
	letter-spacing: normal;
}

.ftm-met__play {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 12px 28px;
	border-radius: 999px;
	border: 0;
	background: #1A2747;
	color: #F6F3EC;
	font-size: 15px;
	font-weight: 700;
	font-family: inherit;
	cursor: pointer;
	transition: transform .15s ease, box-shadow .15s ease, background .15s ease;
	box-shadow: 0 4px 12px rgba(26,39,71,.2);
}
.ftm-met__play:hover {
	transform: translateY(-1px);
	box-shadow: 0 6px 18px rgba(26,39,71,.25);
}
.ftm-met__play.is-playing { background: #E94E3D; }

/* ============================================================
   TUNER
   ============================================================ */
.ftm-tun__start {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 12px 28px;
	border-radius: 999px;
	border: 0;
	background: #1A2747;
	color: #F6F3EC;
	font-size: 15px;
	font-weight: 700;
	cursor: pointer;
	font-family: inherit;
	box-shadow: 0 4px 12px rgba(26,39,71,.2);
}
.ftm-tun__start:hover { transform: translateY(-1px); }
.ftm-tun__start-icon { font-size: 18px; }

.ftm-tun__readout { display: flex; flex-direction: column; gap: 18px; }

.ftm-tun__note-display {
	display: flex;
	align-items: baseline;
	justify-content: center;
	gap: 6px;
	min-height: 76px;
}
.ftm-tun__note {
	font-family: 'Prequel', 'Playfair Display', Georgia, serif;
	font-weight: 400;
	font-size: 72px;
	line-height: 1;
	color: #1A2747;
	transition: color .15s ease;
}
.ftm-tun__note.is-in-tune { color: #3AA764; }
.ftm-tun__octave {
	font-size: 24px;
	color: #6B7280;
	font-weight: 600;
}

.ftm-tun__meter { max-width: 420px; margin: 0 auto; }
.ftm-tun__meter-scale {
	display: flex; justify-content: space-between;
	font-size: 10px;
	letter-spacing: 0.06em;
	color: #9CA3AF;
	font-weight: 700;
	padding: 0 2px 4px;
}
.ftm-tun__tick--zero { color: #3AA764; }
.ftm-tun__meter-bar {
	position: relative;
	height: 12px;
	background: linear-gradient(to right,
		#E94E3D 0%, #F2C544 30%, #3AA764 48%, #3AA764 52%, #F2C544 70%, #E94E3D 100%);
	border-radius: 6px;
	overflow: hidden;
}
.ftm-tun__meter-center {
	position: absolute;
	left: 50%; top: 0; bottom: 0;
	width: 2px;
	background: rgba(26,39,71,0.5);
	transform: translateX(-50%);
}
.ftm-tun__needle {
	position: absolute;
	left: 50%; top: -4px; bottom: -4px;
	width: 4px;
	background: #1A2747;
	border-radius: 2px;
	transform: translateX(0);
	transition: transform .1s linear;
}
.ftm-tun__meter-reading {
	display: flex; justify-content: space-between;
	margin-top: 6px;
	font-size: 13px;
	color: #6B7280;
}
.ftm-tun__cents { font-weight: 700; color: #1A2747; }

.ftm-tun__targets {
	border-top: 1px solid #E4E8EE;
	padding-top: 14px;
}
.ftm-tun__targets-label {
	display: block;
	font-size: 11px;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: #6B7280;
	font-weight: 700;
	margin-bottom: 8px;
}
.ftm-tun__targets-list {
	display: flex;
	justify-content: center;
	gap: 8px;
	flex-wrap: wrap;
}
.ftm-tun__target {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 34px; height: 34px;
	padding: 0 10px;
	border-radius: 999px;
	background: #FFFFFF;
	border: 1px solid #D8DCE4;
	font-weight: 700;
	color: #1A2747;
	font-size: 14px;
	transition: all .2s ease;
}
.ftm-tun__target.is-active {
	background: #3AA764;
	border-color: #3AA764;
	color: #FFFFFF;
	transform: scale(1.1);
}

.ftm-tun__stop {
	align-self: center;
	padding: 7px 18px;
	border-radius: 999px;
	border: 1px solid #D8DCE4;
	background: #FFFFFF;
	color: #1A2747;
	font-weight: 600;
	cursor: pointer;
	font-family: inherit;
	font-size: 13px;
}
.ftm-tun__stop:hover { background: #F6F3EC; }

.ftm-tun__error {
	margin: 12px 0 0;
	padding: 10px 14px;
	background: #FDF1EC;
	border: 1px solid #F2C8BB;
	border-radius: 8px;
	font-size: 13px;
	color: #A63621;
}

/* ============================================================
   MENTORSHIP CTA (v1.8.0) — drives free instrument-lessons users
   into the paid FTM mentorship membership ($150/mo: 1:1 + Circle
   community + course library + festival discounts + production).
   Two variants: full panel + minimal nudge. Both use the FTM
   design system with instrument-tinted accent.
   ============================================================ */
.ftm-mentorship-cta {
	max-width: 1080px;
	margin: 48px auto;
	padding: 0;
	background: #1A2747;
	color: #F6F3EC;
	border-radius: 18px;
	overflow: hidden;
	position: relative;
	font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
	box-shadow: 0 16px 40px rgba(26,39,71,0.18);
}
.ftm-mentorship-cta__rainbow {
	height: 5px;
	background: linear-gradient(90deg,
		#E94E3D 0%, #F2883A 16%, #F2C544 32%, #6FB24A 48%,
		#3DA3B5 64%, #3B6FB8 80%, #7E4BA8 100%);
}
.ftm-mentorship-cta__inner {
	padding: 40px 44px 36px;
	position: relative;
}
.ftm-mentorship-cta__head {
	max-width: 760px;
}
.ftm-mentorship-cta__kicker {
	display: inline-block;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--ftm-mentor-accent, #F2B230);
	margin-bottom: 12px;
}
.ftm-mentorship-cta__title {
	font-family: 'Prequel', 'Playfair Display', Georgia, serif !important;
	font-weight: 400 !important;
	font-size: clamp(28px, 4vw, 42px);
	line-height: 1.08;
	margin: 0 0 14px;
	color: #F6F3EC;
	letter-spacing: 0.01em;
}
.ftm-mentorship-cta__lede {
	margin: 0 0 24px;
	font-size: 16px;
	line-height: 1.6;
	color: #D7DCE6;
	max-width: 64ch;
}
.ftm-mentorship-cta__lede strong {
	color: #F6F3EC;
	font-weight: 700;
}
.ftm-mentorship-cta__stack {
	list-style: none;
	padding: 0;
	margin: 0 0 28px;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
	gap: 12px 24px;
}
.ftm-mentorship-cta__stack li {
	font-size: 14px;
	line-height: 1.5;
	color: #D7DCE6;
	padding-left: 28px;
	position: relative;
}
.ftm-mentorship-cta__stack li span {
	position: absolute;
	left: 0; top: 0;
	width: 20px;
	height: 20px;
	border-radius: 50%;
	background: var(--ftm-mentor-accent, #F2B230);
	color: #1A2747;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-size: 12px;
	font-weight: 700;
	margin-top: 1px;
}
.ftm-mentorship-cta__stack strong { color: #F6F3EC; font-weight: 700; }
.ftm-mentorship-cta__actions {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 16px;
	margin-bottom: 12px;
}
.ftm-mentorship-cta__btn {
	display: inline-flex;
	align-items: center;
	padding: 14px 28px;
	border-radius: 999px;
	background: var(--ftm-mentor-accent, #F2B230);
	color: #1A2747 !important;
	font-weight: 700;
	font-size: 15px;
	letter-spacing: 0.02em;
	text-decoration: none !important;
	transition: transform .15s ease, box-shadow .15s ease;
	box-shadow: 0 4px 16px rgba(0,0,0,0.18);
}
.ftm-mentorship-cta__btn:hover {
	transform: translateY(-1px);
	text-decoration: none !important;
}
.ftm-mentorship-cta__price {
	font-size: 14px;
	color: #D7DCE6;
	font-weight: 600;
	letter-spacing: 0.02em;
}
.ftm-mentorship-cta__note {
	margin: 0;
	font-size: 13px;
	color: #A9B2C4;
	line-height: 1.5;
}
.ftm-mentorship-cta__note a {
	color: var(--ftm-mentor-accent, #F2B230) !important;
	text-decoration: underline !important;
	font-weight: 600;
}

@media (max-width: 600px) {
	.ftm-mentorship-cta__inner { padding: 28px 22px 24px; }
	.ftm-mentorship-cta__stack { grid-template-columns: 1fr; }
}

/* Minimal nudge — for inline use in lesson body content. */
.ftm-mentorship-nudge {
	display: flex;
	align-items: center;
	gap: 14px;
	flex-wrap: wrap;
	margin: 28px 0;
	padding: 16px 20px;
	background: #F6F3EC;
	border-left: 4px solid var(--ftm-mentor-accent, #F2B230);
	border-radius: 8px;
	font-family: 'Inter', sans-serif;
	font-size: 14px;
	line-height: 1.5;
	color: #2E3C63;
}
.ftm-mentorship-nudge__icon {
	color: var(--ftm-mentor-accent, #F2B230);
	font-size: 22px;
	line-height: 1;
}
.ftm-mentorship-nudge__text { flex: 1 1 280px; }
.ftm-mentorship-nudge__text strong { color: #1A2747; display: block; margin-bottom: 2px; }
.ftm-mentorship-nudge__link {
	color: #1A2747 !important;
	font-weight: 700;
	text-decoration: underline !important;
	white-space: nowrap;
}

/* ============================================================
   CHORD CHART TABS (v1.7.0) — switch between By-Key and Full Range
   ============================================================ */
.ftm-chord-chart-tabs__nav {
	display: inline-flex;
	margin: 0 auto 24px;
	padding: 4px;
	background: rgba(26, 39, 71, 0.06);
	border-radius: 999px;
	gap: 2px;
}
.ftm-chord-chart-tabs {
	text-align: center;
}
.ftm-chord-chart-tabs__btn {
	font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
	font-weight: 700;
	font-size: 13px;
	letter-spacing: 0.06em;
	padding: 10px 22px;
	border: 0;
	background: transparent;
	color: #2E3C63;
	border-radius: 999px;
	cursor: pointer;
	transition: background .15s ease, color .15s ease;
}
.ftm-chord-chart-tabs__btn:hover { color: #1A2747; }
.ftm-chord-chart-tabs__btn.is-active {
	background: #1A2747;
	color: #F6F3EC;
}
.ftm-chord-chart-tabs__panel { text-align: left; }
.ftm-chord-chart-tabs__panel[hidden] { display: none !important; }

/* ============================================================
   BY-KEY CHORD CHART (v1.7.1) — reuses the Full Range table grid
   so the printed PDF lands at the same printable single-page ratio.
   Adds Roman-numeral column headers and styles the row header
   slightly differently to read as "Key of X" rather than just a root.
   ============================================================ */
.ftm-chord-chart__cell--roman {
	font-family: 'Prequel', 'Playfair Display', Georgia, serif !important;
	font-weight: 400 !important;
	font-size: 16px !important;
	letter-spacing: 0.04em;
	color: var(--ftm-chord-accent, #1A2747) !important;
	background: #F6F3EC !important;
}
.ftm-chord-chart__grid--by-key .ftm-chord-chart__cell--rhead {
	letter-spacing: 0.04em;
}
/* Mobile: column headers (qhead/roman) are hidden by the existing rule, so
   we surface the Roman numeral inside each cell using the data-roman attr. */
@media (max-width: 768px) {
	.ftm-chord-chart__grid--by-key .ftm-chord-chart__cell--chord[data-roman]::before {
		content: attr(data-roman);
		display: block;
		font-family: 'Prequel', 'Playfair Display', Georgia, serif;
		font-size: 14px;
		color: var(--ftm-chord-accent, #1A2747);
		letter-spacing: 0.06em;
		margin-bottom: 4px;
	}
}

/* ============================================================
   FTM CHORD CHART (v1.5.0) — full poster-style chord reference,
   12 roots × N qualities, FTM-branded, print-friendly.
   ============================================================ */
.ftm-chord-chart {
	max-width: 1280px;
	margin: 0 auto;
	padding: 0 20px 40px;
	font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
	color: #1A2747;
}
.ftm-chord-chart__rainbow {
	height: 5px;
	border-radius: 999px;
	background: linear-gradient(90deg,
		#E94E3D 0%, #F2883A 16%, #F2C544 32%, #6FB24A 48%,
		#3DA3B5 64%, #3B6FB8 80%, #7E4BA8 100%);
	margin: 0 0 16px;
}
.ftm-chord-chart__header {
	position: relative;
	padding: 20px 0 16px;
	display: grid;
	grid-template-columns: 1fr auto;
	gap: 16px;
	align-items: end;
	border-bottom: 1px solid #EAE3D0;
	margin-bottom: 24px;
}
.ftm-chord-chart__brand {
	min-width: 0;
	display: flex;
	align-items: center;
	gap: 18px;
}
.ftm-chord-chart__logo {
	flex: 0 0 auto;
	width: 96px;
	/* The logo's center cross uses currentColor — setting color here
	   tints just that cross to the instrument's accent. */
	color: var(--ftm-chord-accent, #1A2747);
	display: block;
	line-height: 0;
}
.ftm-chord-chart__logo svg {
	display: block;
	width: 100%;
	height: auto;
}
.ftm-chord-chart__brand-text { min-width: 0; }
.ftm-chord-chart__kicker {
	display: block;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--ftm-chord-accent, #6B7280);
	margin-bottom: 4px;
}
.ftm-chord-chart__title {
	font-family: 'Prequel', 'Playfair Display', Georgia, serif !important;
	font-weight: 400 !important;
	font-size: clamp(32px, 5vw, 56px);
	line-height: 1.05;
	margin: 0 0 8px;
	color: var(--ftm-chord-accent, #1A2747);
	letter-spacing: 0.01em;
}
.ftm-chord-chart__subtitle {
	margin: 0;
	font-size: 14px;
	color: #2E3C63;
	max-width: 56ch;
}
.ftm-chord-chart__download {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 10px 18px;
	border-radius: 999px;
	border: 1px solid #1A2747;
	background: #1A2747;
	color: #F6F3EC;
	font-family: inherit;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.04em;
	cursor: pointer;
	transition: background .15s ease, transform .15s ease;
}
.ftm-chord-chart__download:hover {
	background: #2E3C63;
	transform: translateY(-1px);
}
.ftm-chord-chart__download[data-ftm-busy] {
	opacity: 0.75;
	cursor: progress;
	transform: none;
}
.ftm-chord-chart__download[data-ftm-busy]::before {
	content: "";
	width: 12px;
	height: 12px;
	border-radius: 50%;
	border: 2px solid rgba(246, 243, 236, 0.35);
	border-top-color: #F6F3EC;
	animation: ftm-chord-spin 0.7s linear infinite;
}
@keyframes ftm-chord-spin {
	to { transform: rotate(360deg); }
}

/* PDF capture mode — temporarily applied to the chart during html2canvas
   render so the full FTM brand header + footer show up in the PDF, even
   when the page that embeds the chart normally hides them. */
.ftm-chord-chart--pdf-capture .ftm-chord-chart__brand {
	display: flex !important;
	align-items: center !important;
	gap: 18px !important;
}
.ftm-chord-chart--pdf-capture .ftm-chord-chart__footer { display: block !important; }
.ftm-chord-chart--pdf-capture .ftm-chord-chart__download { visibility: hidden !important; }
.ftm-chord-chart--pdf-capture .ftm-chord-chart__header {
	display: grid !important;
	grid-template-columns: 1fr auto !important;
	gap: 16px !important;
	padding: 20px 0 16px !important;
	margin: 0 0 24px !important;
	border-bottom: 1px solid #EAE3D0 !important;
	align-items: end !important;
}
/* Force the chart into its desktop grid for capture so the PDF poster
   always looks like the desktop layout regardless of the user's viewport. */
.ftm-chord-chart--pdf-capture .ftm-chord-chart__grid {
	grid-template-columns: 56px repeat(calc(var(--ftm-cols) - 1), minmax(0, 1fr)) !important;
	gap: 1px !important;
	background: #EAE3D0 !important;
	border: 1px solid #EAE3D0 !important;
	border-radius: 12px !important;
	overflow: hidden !important;
	padding: 0 !important;
}
.ftm-chord-chart--pdf-capture .ftm-chord-chart__cell--corner,
.ftm-chord-chart--pdf-capture .ftm-chord-chart__cell--qhead {
	display: flex !important;
	background: #F6F3EC !important;
}
.ftm-chord-chart--pdf-capture .ftm-chord-chart__cell--rhead {
	grid-column: auto !important;
	background: #F6F3EC !important;
	color: #1A2747 !important;
	margin-top: 0 !important;
	border-radius: 0 !important;
	font-size: 16px !important;
	padding: 12px 8px !important;
}
.ftm-chord-chart--pdf-capture .ftm-chord-chart__cell--rhead::before { display: none !important; }
.ftm-chord-chart--pdf-capture .ftm-chord-chart__cell--chord {
	background: #FFFFFF !important;
	border: 0 !important;
	border-radius: 0 !important;
	min-height: 0 !important;
	padding: 8px 6px !important;
}

.ftm-chord-chart__grid {
	display: grid;
	grid-template-columns: 56px repeat(calc(var(--ftm-cols) - 1), minmax(0, 1fr));
	gap: 1px;
	background: #EAE3D0;
	border: 1px solid #EAE3D0;
	border-radius: 12px;
	overflow: hidden;
}
.ftm-chord-chart__cell {
	background: #FFFFFF;
	padding: 10px 6px;
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 0;
}
.ftm-chord-chart__cell--corner {
	background: #F6F3EC;
}
.ftm-chord-chart__cell--qhead {
	background: #F6F3EC;
	font-family: 'Prequel', 'Playfair Display', Georgia, serif;
	font-size: 18px;
	color: #1A2747;
	letter-spacing: 0.04em;
	padding: 14px 4px;
}
.ftm-chord-chart__cell--rhead {
	background: #F6F3EC;
	font-family: 'Prequel', 'Playfair Display', Georgia, serif;
	font-size: 22px;
	color: #1A2747;
	letter-spacing: 0.02em;
}
.ftm-chord-chart__cell--chord {
	flex-direction: column;
	gap: 4px;
	padding: 8px 4px;
}
.ftm-chord-chart__cell--chord .ftm-inst-chord {
	padding: 0;
	gap: 2px;
}
.ftm-chord-chart__cell--chord .ftm-inst-chord__name {
	font-size: 12px;
	font-weight: 700;
	color: #1A2747;
}
.ftm-chord-chart__cell--chord .ftm-inst-chord--sm .ftm-inst-chord__svg {
	width: 100%;
	height: auto;
	max-width: 110px;
}
.ftm-chord-chart__cell--chord .ftm-inst-chord--no-play .ftm-inst-chord__play {
	display: none !important;
}

.ftm-chord-chart__footer {
	margin-top: 28px;
	padding-top: 12px;
}
.ftm-chord-chart__legal {
	margin: 16px 0 0;
	font-size: 14px;
	font-weight: 500;
	color: #1A2747;
	text-align: center;
	letter-spacing: 0.01em;
}
.ftm-chord-chart__legal strong {
	color: var(--ftm-chord-accent, #1A2747);
	font-weight: 700;
}

/* Mentorship CTA — the "take this further" block in the chart footer.
   Appears on-screen and in the exported PDF. PDF-aware: no button (a
   button on paper does nothing), the URL itself is the call to action,
   rendered prominently in the instrument-accent color. */
.ftm-chord-chart__cta {
	margin: 24px 0 0;
	padding: 22px 28px;
	background: #1A2747;
	color: #F6F3EC;
	border-radius: 14px;
	position: relative;
	overflow: hidden;
	text-align: center;
}
/* Instrument-accent strip on the left edge of the CTA — subtle tie-in
   to the chart's accent color without overwhelming the dark panel. */
.ftm-chord-chart__cta::before {
	content: "";
	position: absolute;
	left: 0; top: 0; bottom: 0;
	width: 6px;
	background: var(--ftm-chord-accent, #F2B230);
}
.ftm-chord-chart__cta-title {
	font-family: 'Prequel', 'Playfair Display', Georgia, serif !important;
	font-weight: 400 !important;
	font-size: clamp(18px, 2vw, 22px);
	margin: 0 0 8px;
	color: #F6F3EC;
	letter-spacing: 0.01em;
}
.ftm-chord-chart__cta-blurb {
	margin: 0 auto 12px;
	font-size: 13px;
	line-height: 1.55;
	color: #D7DCE6;
	max-width: 62ch;
}
.ftm-chord-chart__cta-url {
	margin: 0;
	font-size: 16px;
	font-weight: 700;
	letter-spacing: 0.02em;
	color: var(--ftm-chord-accent, #F2B230);
	font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
}

/* ============================================================
   PDF DOWNLOAD MODAL (v1.5.5) — "please wait" overlay shown
   during html2canvas render, with a manual fallback link if
   the browser's auto-download doesn't fire.
   ============================================================ */
.ftm-chord-dl-modal {
	display: none;
	position: fixed;
	inset: 0;
	z-index: 10000;
	align-items: center;
	justify-content: center;
	padding: 24px;
	font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
}
.ftm-chord-dl-modal.is-open { display: flex; }
.ftm-chord-dl-modal__backdrop {
	position: absolute;
	inset: 0;
	background: rgba(26, 39, 71, 0.72);
	backdrop-filter: blur(6px);
	-webkit-backdrop-filter: blur(6px);
}
.ftm-chord-dl-modal__card {
	position: relative;
	background: #F6F3EC;
	border-radius: 18px;
	padding: 32px 36px;
	max-width: 440px;
	width: 100%;
	text-align: center;
	box-shadow: 0 20px 60px rgba(0,0,0,0.25);
}
.ftm-chord-dl-modal__rainbow {
	height: 5px;
	margin: -32px -36px 20px;
	border-radius: 18px 18px 0 0;
	background: linear-gradient(90deg,
		#E94E3D 0%, #F2883A 16%, #F2C544 32%, #6FB24A 48%,
		#3DA3B5 64%, #3B6FB8 80%, #7E4BA8 100%);
}
.ftm-chord-dl-modal__spinner {
	width: 44px;
	height: 44px;
	margin: 0 auto 18px;
	border-radius: 50%;
	border: 4px solid rgba(26, 39, 71, 0.12);
	border-top-color: #1A2747;
	animation: ftm-chord-spin 0.9s linear infinite;
}
.ftm-chord-dl-modal.is-ready .ftm-chord-dl-modal__spinner {
	display: none;
}
.ftm-chord-dl-modal__icon-done {
	display: none;
	width: 44px;
	height: 44px;
	margin: 0 auto 14px;
	border-radius: 50%;
	background: #3aa764;
	color: #FFFFFF;
	align-items: center;
	justify-content: center;
	font-size: 22px;
	line-height: 1;
}
.ftm-chord-dl-modal.is-ready .ftm-chord-dl-modal__icon-done { display: flex; }
.ftm-chord-dl-modal__title {
	font-family: 'Prequel', 'Playfair Display', Georgia, serif !important;
	font-weight: 400 !important;
	font-size: 24px;
	margin: 0 0 10px;
	color: #1A2747;
	letter-spacing: 0.01em;
}
.ftm-chord-dl-modal__msg {
	margin: 0 0 18px;
	font-size: 14px;
	line-height: 1.5;
	color: #2E3C63;
}
.ftm-chord-dl-modal__fallback {
	display: none;
	margin: 0 0 14px;
	padding: 12px 16px;
	background: rgba(26, 39, 71, 0.04);
	border-radius: 10px;
	font-size: 13px;
	color: #1A2747;
}
.ftm-chord-dl-modal.is-ready .ftm-chord-dl-modal__fallback { display: block; }
.ftm-chord-dl-modal__fallback a {
	color: #1A2747;
	font-weight: 700;
	text-decoration: underline;
}

/* Primary "save" action — only shown once the PDF is ready. On mobile this
   is the actual download mechanism (iOS Safari blocks programmatic saves);
   on desktop it's a manual fallback in case the auto-save was blocked. */
.ftm-chord-dl-modal__action {
	display: none;
	margin: 0 0 14px;
	padding: 14px 28px;
	background: #1A2747;
	color: #F6F3EC !important;
	border-radius: 999px;
	font-weight: 700;
	font-size: 15px;
	letter-spacing: 0.04em;
	text-decoration: none !important;
	transition: background .15s ease, transform .15s ease;
}
.ftm-chord-dl-modal__action:hover {
	background: #2E3C63;
	transform: translateY(-1px);
}
.ftm-chord-dl-modal.is-ready .ftm-chord-dl-modal__action {
	display: inline-block;
}
.ftm-chord-dl-modal__close {
	display: inline-flex;
	align-items: center;
	padding: 10px 22px;
	border-radius: 999px;
	background: #1A2747;
	color: #F6F3EC;
	font-weight: 700;
	font-size: 13px;
	letter-spacing: 0.04em;
	border: 0;
	cursor: pointer;
	transition: background .15s ease;
}
.ftm-chord-dl-modal__close:hover { background: #2E3C63; }
.ftm-chord-dl-modal__close[data-ftm-dl-close]:not(.is-visible) {
	visibility: hidden;
}
.ftm-chord-dl-modal.is-ready .ftm-chord-dl-modal__close {
	visibility: visible;
}

/* Mobile: redesigned layout — group by root, 2 chords per row.
   Each root letter becomes a full-width banner header; chord cells stack
   2-up beneath it. The chord name in each cell (Cmaj7, Cm6, etc.) is
   self-documenting, so the quality column headers can be hidden. */
@media (max-width: 768px) {
	.ftm-chord-chart__header {
		grid-template-columns: 1fr;
		gap: 12px;
		align-items: start;
	}
	.ftm-chord-chart__download { justify-self: start; }
	.ftm-chord-chart__title { font-size: clamp(28px, 8vw, 40px); }
	.ftm-chord-chart__brand {
		flex-wrap: wrap;
		gap: 12px;
	}
	.ftm-chord-chart__logo { width: 72px; }

	.ftm-chord-chart__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 8px;
		padding: 0;
		background: transparent;
		border: 0;
		border-radius: 0;
		overflow: visible;
	}
	/* Corner + quality-column headers don't make sense in the stacked
	   layout — chord names already encode the quality. Hide them. */
	.ftm-chord-chart__cell--corner,
	.ftm-chord-chart__cell--qhead {
		display: none;
	}
	/* Root header spans the full width as a navy section banner. */
	.ftm-chord-chart__cell--rhead {
		grid-column: 1 / -1;
		background: #1A2747;
		color: #F6F3EC;
		font-size: 26px;
		padding: 14px 12px;
		border-radius: 12px;
		margin-top: 18px;
		position: relative;
		overflow: hidden;
		justify-content: center;
	}
	/* Rainbow accent strip on the top of each root banner — ties the
	   sections back to the FTM design system. */
	.ftm-chord-chart__cell--rhead::before {
		content: "";
		position: absolute;
		top: 0; left: 0; right: 0;
		height: 4px;
		background: linear-gradient(90deg,
			#E94E3D 0%, #F2883A 16%, #F2C544 32%, #6FB24A 48%,
			#3DA3B5 64%, #3B6FB8 80%, #7E4BA8 100%);
	}
	.ftm-chord-chart__cell--rhead:first-of-type { margin-top: 0; }

	/* Chord cells: white card with subtle border, name above diagram. */
	.ftm-chord-chart__cell--chord {
		background: #FFFFFF;
		border: 1px solid #EAE3D0;
		border-radius: 12px;
		padding: 10px 8px;
		min-height: 110px;
	}
	.ftm-chord-chart__cell--chord .ftm-inst-chord__name {
		font-size: 13px;
		font-weight: 700;
		color: #1A2747;
	}
	.ftm-chord-chart__cell--chord .ftm-inst-chord--sm .ftm-inst-chord__svg {
		width: 100%;
		max-width: 130px;
	}
}

/* Tighter still for very narrow viewports */
@media (max-width: 380px) {
	.ftm-chord-chart__cell--rhead { font-size: 22px; padding: 12px 10px; }
	.ftm-chord-chart__cell--chord { padding: 8px 6px; }
	.ftm-chord-chart__cell--chord .ftm-inst-chord__name { font-size: 12px; }
}

/* Print / Save-as-PDF — clean, edge-to-edge, FTM-branded.
   Uses the classic visibility-toggle pattern: hide everything by default,
   then make the chord chart and its ancestor chain visible. This works
   regardless of how deeply the chart is nested in the page (e.g. inside
   the archive .ftm-iap wrapper). */
@media print {
	@page { size: landscape; margin: 12mm; }
	body, html {
		background: #FFFFFF !important;
		color: #1A2747 !important;
	}
	body * { visibility: hidden !important; }
	.ftm-chord-chart,
	.ftm-chord-chart * {
		visibility: visible !important;
	}
	.ftm-chord-chart {
		position: absolute !important;
		left: 0 !important;
		top: 0 !important;
		width: 100% !important;
		max-width: 100% !important;
		margin: 0 !important;
		padding: 12px !important;
	}
	.ftm-chord-chart__download { display: none !important; }
	.ftm-chord-chart__header {
		page-break-after: avoid;
	}
	.ftm-chord-chart__cell--rhead,
	.ftm-chord-chart__cell--qhead {
		background: #F6F3EC !important;
		-webkit-print-color-adjust: exact;
		print-color-adjust: exact;
	}
	.ftm-chord-chart__rainbow {
		-webkit-print-color-adjust: exact;
		print-color-adjust: exact;
	}
	.ftm-inst-chord__svg {
		color: #1A2747 !important;
		-webkit-print-color-adjust: exact;
		print-color-adjust: exact;
	}
	.ftm-chord-chart__cell {
		break-inside: avoid;
	}
	/* Hide the click-to-zoom modal during print (it's a runtime UI). */
	#ftm-chord-zoom { display: none !important; }
}

/* ============================================================
   CLICK-TO-ZOOM MODAL (v1.5.2) — tap any chord cell to see a
   bigger version with a Play button. Hidden by default.
   ============================================================ */
.ftm-chord-zoom {
	display: none;
	position: fixed;
	inset: 0;
	z-index: 10000;
}
.ftm-chord-zoom.is-open { display: block; }

.ftm-chord-zoom__backdrop {
	position: absolute;
	inset: 0;
	background: rgba(26, 39, 71, 0.72);
	backdrop-filter: blur(2px);
	-webkit-backdrop-filter: blur(2px);
	animation: ftm-chord-zoom-fade .15s ease;
}
@keyframes ftm-chord-zoom-fade {
	from { opacity: 0; }
	to   { opacity: 1; }
}
.ftm-chord-zoom__card {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	background: #FFFFFF;
	border-radius: 20px;
	padding: 32px 36px 28px;
	max-width: min(90vw, 480px);
	max-height: 90vh;
	overflow-y: auto;
	box-shadow: 0 12px 48px rgba(26,39,71,0.35);
	animation: ftm-chord-zoom-pop .2s ease;
}
@keyframes ftm-chord-zoom-pop {
	from { opacity: 0; transform: translate(-50%, -48%) scale(0.96); }
	to   { opacity: 1; transform: translate(-50%, -50%) scale(1); }
}
.ftm-chord-zoom__close {
	position: absolute;
	top: 8px;
	right: 12px;
	background: transparent;
	border: 0;
	font-size: 30px;
	line-height: 1;
	color: #6B7280;
	cursor: pointer;
	padding: 4px 10px;
	border-radius: 6px;
	transition: color .15s ease, background .15s ease;
}
.ftm-chord-zoom__close:hover {
	color: #1A2747;
	background: rgba(26,39,71,0.06);
}
.ftm-chord-zoom__content {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 12px;
}
.ftm-chord-zoom__content .ftm-inst-chord__name {
	font-family: 'Prequel', 'Playfair Display', Georgia, serif !important;
	font-weight: 400 !important;
	font-size: clamp(28px, 5vw, 42px);
	color: #1A2747;
	letter-spacing: 0.02em;
}
.ftm-chord-zoom__content .ftm-inst-chord__svg {
	width: 100%;
	max-width: 320px;
	height: auto;
}
.ftm-chord-zoom__content .ftm-inst-chord__play {
	margin-top: 8px;
	padding: 12px 28px;
	font-size: 14px;
	border-radius: 999px;
	border: 1px solid #1A2747;
	background: #1A2747;
	color: #F6F3EC;
	cursor: pointer;
	font-family: inherit;
	font-weight: 700;
	letter-spacing: 0.04em;
}
.ftm-chord-zoom__content .ftm-inst-chord__play:hover {
	background: #2E3C63;
}

/* Make chord chart cells obviously clickable */
.ftm-chord-chart__cell--chord {
	cursor: pointer;
	transition: background .15s ease, transform .15s ease;
}
.ftm-chord-chart__cell--chord:hover {
	background: #F6F3EC;
}
.ftm-chord-chart__cell--chord:active {
	transform: scale(0.98);
}

/* ============================================================
   ftm-music-theory audio-loader fix (v1.4.5) — applies at ALL widths.
   The loader is a body-level sibling of .ftm-site. With body
   display:flex/row (theme), it consumes layout width as a flex item
   (~162px), collapsing .ftm-site below the viewport on chord pages.
   Position: fixed takes it out of flex flow at every screen size.
   It still displays — just floats bottom-right instead of pushing
   layout. Desktop barely noticed because there was plenty of slack;
   mobile collapsed the lesson to ~70%.
   ============================================================ */
body > .ftm-mt-audio-loader,
body > #ftmMtAudioLoader,
body > .ftm-mt-audio-hint,
body > #ftmMtAudioHint {
	position: fixed !important;
	bottom: 12px !important;
	right: 12px !important;
	left: auto !important;
	top: auto !important;
	z-index: 9999;
	max-width: calc(100vw - 24px);
	box-sizing: border-box;
}