/* RC101 Tools — stylesheet v3.8.3 */

.rc102-tool {
	max-width: 720px;
	margin: 0 auto 2rem;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

.rc102-tool-inner {
	background: #fff;
	border: 1px solid #e2e8f0;
	border-radius: 12px;
	padding: 2rem;
}

/* ── Shared typography ─────────────────────────────────────────── */

.rc102-big-number {
	font-size: 72px;
	font-weight: 600;
	color: #1e293b;
	line-height: 1;
}

.rc102-note-name {
	font-size: 80px;
	font-weight: 600;
	color: #1e293b;
	line-height: 1;
}

.rc102-note-sub {
	font-size: 13px;
	line-height: 20px;
	height: 20px;
	color: #64748b;
	margin-top: 6px;
}

.rc102-label {
	font-size: 13px;
	color: #64748b;
}

.rc102-status {
	text-align: center;
	font-size: 13px;
	color: #64748b;
	margin-top: 10px;
	min-height: 20px;
}

/* ── Buttons ───────────────────────────────────────────────────── */

.rc102-btn {
	padding: 10px 28px;
	font-size: 14px;
	font-weight: 500;
	border-radius: 8px;
	border: 1px solid #e2e8f0;
	background: #f8fafc;
	color: #334155;
	cursor: pointer;
	transition: all 0.15s;
	line-height: 1.2;
}

.rc102-btn:hover {
	background: #f1f5f9;
	border-color: #cbd5e1;
}

.rc102-btn-primary,
.rc102-btn-primary:hover,
.rc102-btn-primary:focus,
.rc102-btn-primary:visited {
	background: #256BA8;
	color: #fff;
	border-color: #256BA8;
}

.rc102-btn-primary:hover {
	background: #1d5a8f;
	border-color: #1d5a8f;
}

.rc102-btn-primary.active,
.rc102-btn-primary.active:hover,
.rc102-btn-primary.active:focus {
	background: #1d5a8f;
	color: #fff;
	border-color: #1d5a8f;
}

.rc102-btn.active,
.rc102-btn.active:hover,
.rc102-btn.active:focus {
	background: #1d5a8f;
	color: #fff;
	border-color: #1d5a8f;
}

.rc102-adj-btn {
	width: 38px;
	height: 38px;
	border-radius: 8px;
	border: 1px solid #e2e8f0;
	background: #f8fafc;
	color: #334155;
	font-size: 20px;
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	transition: background 0.1s;
	line-height: 1;
}

.rc102-adj-btn:hover { background: #f1f5f9; }

.rc102-mode-btn {
	padding: 7px 16px;
	font-size: 13px;
	font-weight: 500;
	border-radius: 8px;
	border: 1px solid #e2e8f0;
	background: #f8fafc;
	color: #64748b;
	cursor: pointer;
	line-height: 1.2;
}

.rc102-mode-btn:hover { color: #334155; border-color: #cbd5e1; }
.rc102-mode-btn.active { background: #256BA8; color: #fff; border-color: #256BA8; }

/* ── Quiz feedback badge ───────────────────────────────────────── */
/* Accessible counterpart to the red/green button coloring in the
   answer buttons: carries both text and an icon (not color alone),
   and the container has aria-live="polite" set in the PHP markup so
   screen readers announce the result automatically. Sits inline with
   the Reference/Quiz Me buttons, pushed to the right. */

.rc102-quiz-feedback {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-left: auto;
}

.rc102-quiz-feedback-icon {
	width: 24px;
	height: 24px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	font-size: 14px;
	color: #fff;
	line-height: 1;
}

.rc102-quiz-feedback-text {
	font-size: 18px;
	font-weight: 500;
}

.rc102-quiz-feedback.correct .rc102-quiz-feedback-icon { background: #166534; }
.rc102-quiz-feedback.correct .rc102-quiz-feedback-text { color: #166534; }
.rc102-quiz-feedback.wrong  .rc102-quiz-feedback-icon { background: #dc2626; }
.rc102-quiz-feedback.wrong  .rc102-quiz-feedback-text { color: #dc2626; }

/* ── Form elements ─────────────────────────────────────────────── */

.rc102-select {
	padding: 7px 10px;
	font-size: 13px;
	border-radius: 8px;
	border: 1px solid #e2e8f0;
	background: #f8fafc;
	color: #334155;
	cursor: pointer;
}

.rc102-slider {
	-webkit-appearance: none;
	appearance: none;
	flex: 1;
	height: 4px;
	border-radius: 2px;
	background: #e2e8f0;
	outline: none;
}

.rc102-slider::-webkit-slider-thumb {
	-webkit-appearance: none;
	width: 20px;
	height: 20px;
	border-radius: 50%;
	background: #256BA8;
	cursor: pointer;
	border: 2px solid #fff;
	box-shadow: 0 1px 4px rgba(0,0,0,0.2);
}

.rc102-slider::-moz-range-thumb {
	width: 20px;
	height: 20px;
	border-radius: 50%;
	background: #256BA8;
	cursor: pointer;
	border: 2px solid #fff;
}

/* ── Toggle switch ─────────────────────────────────────────────── */

.rc102-toggle-section {
	padding-top: 1.25rem;
	border-top: 1px solid #f1f5f9;
	margin-bottom: 1rem;
	text-align: center;
}

.rc102-toggle-wrap {
	display: inline-flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 8px;
}

.rc102-toggle-label {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	cursor: pointer;
	user-select: none;
}

.rc102-toggle-label input[type="checkbox"] {
	position: absolute;
	opacity: 0;
	width: 0;
	height: 0;
}

.rc102-toggle-track {
	position: relative;
	display: inline-block;
	width: 40px;
	height: 22px;
	background: #cbd5e1;
	border-radius: 11px;
	transition: background 0.2s;
	flex-shrink: 0;
}

.rc102-toggle-label input:checked + .rc102-toggle-track {
	background: #256BA8;
}

.rc102-toggle-thumb {
	position: absolute;
	top: 3px;
	left: 3px;
	width: 16px;
	height: 16px;
	background: #fff;
	border-radius: 50%;
	transition: transform 0.2s;
	box-shadow: 0 1px 3px rgba(0,0,0,0.2);
}

.rc102-toggle-label input:checked + .rc102-toggle-track .rc102-toggle-thumb {
	transform: translateX(18px);
}

.rc102-toggle-text {
	font-size: 13px;
	color: #475569;
}

/* ── TUNER ─────────────────────────────────────────────────────── */

.rc102-tuner .rc102-note-display {
	text-align: center;
	padding: 0.5rem 0 1rem;
}

/*
 * Tuner now uses the site's own blue (#256BA8) rather than a traffic-light
 * red/yellow/green scheme. The big note name itself becomes the primary
 * "in tune" signal (turns blue + bold when centred); the track below is a
 * secondary visual aid, intentionally minimal — no numeric Hz/cents values.
 */

.rc102-note-name.in-tune {
	color: #256BA8;
}

.rc102-tune-indicator {
	max-width: 360px;
	margin: 0 auto 1.5rem;
}

.rc102-tune-track {
	position: relative;
	height: 6px;
	border-radius: 3px;
	background: #e2e8f0;
}

.rc102-tune-center {
	position: absolute;
	top: -5px;
	left: 50%;
	width: 2px;
	height: 16px;
	background: #cbd5e1;
	transform: translateX(-1px);
}

.rc102-tune-dot {
	position: absolute;
	top: -6px;
	left: 50%;
	width: 18px;
	height: 18px;
	border-radius: 50%;
	background: #94a3b8;
	transform: translateX(-9px);
	transition: left 0.1s ease-out, background 0.15s;
	box-shadow: 0 1px 3px rgba(0,0,0,0.15);
}

.rc102-tune-dot.in-tune {
	background: #256BA8;
}

.rc102-tune-labels {
	display: flex;
	justify-content: space-between;
	font-size: 12px;
	color: #64748b;
	margin-top: 10px;
}

.rc102-strings {
	display: flex;
	justify-content: center;
	gap: 10px;
	margin-bottom: 1.5rem;
}

.rc102-string-pill {
	padding: 7px 18px;
	border-radius: 999px;
	border: 1px solid #e2e8f0;
	font-size: 14px;
	font-weight: 600;
	color: #64748b;
	background: #f8fafc;
	transition: all 0.15s;
	letter-spacing: 0.02em;
}

.rc102-string-pill.active {
	background: #256BA8;
	color: #fff;
	border-color: #256BA8;
}

/* ── METRONOME ─────────────────────────────────────────────────── */

.rc102-metronome .rc102-bpm-display {
	text-align: center;
	padding: 0.5rem 0 1rem;
}

.rc102-slider-row {
	display: flex;
	align-items: center;
	gap: 12px;
	margin-bottom: 0.75rem;
}

.rc102-ts-row {
	display: flex;
	align-items: center;
	gap: 12px;
	justify-content: center;
	margin-bottom: 1.25rem;
}

.rc102-beat-dots {
	display: flex;
	justify-content: center;
	gap: 14px;
	margin-bottom: 1.5rem;
	align-items: center;
}

.rc102-beat-dot {
	width: 16px;
	height: 16px;
	border-radius: 50%;
	background: #f1f5f9;
	border: 1px solid #e2e8f0;
	transition: background 0.06s;
}

.rc102-beat-accent {
	width: 22px;
	height: 22px;
}

.rc102-beat-dot.active { background: #256BA8; border-color: #256BA8; }
.rc102-beat-dot.active.rc102-beat-accent { background: #f47e3c; border-color: #f47e3c; }

.rc102-metro-btns {
	display: flex;
	justify-content: center;
	gap: 12px;
}

/* ── FRETBOARD ─────────────────────────────────────────────────── */

.rc102-fb-controls {
	display: flex;
	gap: 10px;
	margin-bottom: 1.25rem;
	flex-wrap: wrap;
	align-items: center;
}

.rc102-fb-wrap {
	overflow-x: auto;
	margin-bottom: 1rem;
}

.rc102-quiz-area {
	text-align: center;
	padding-top: 1.25rem;
	border-top: 1px solid #f1f5f9;
}

.rc102-quiz-q {
	font-size: 17px;
	font-weight: 500;
	color: #1e293b;
	margin-bottom: 1rem;
}

.rc102-quiz-answers {
	display: flex;
	gap: 10px;
	justify-content: center;
	flex-wrap: wrap;
}

.rc102-quiz-btn {
	padding: 9px 22px;
	font-size: 14px;
	font-weight: 500;
	border-radius: 8px;
	border: 1px solid #e2e8f0;
	background: #f8fafc;
	color: #334155;
	cursor: pointer;
	transition: all 0.1s;
	line-height: 1.2;
}

.rc102-quiz-btn:hover { border-color: #256BA8; color: #256BA8; }
.rc102-quiz-btn.correct { background: #166534; color: #fff; border-color: #166534; }
.rc102-quiz-btn.wrong { background: #fee2e2; color: #dc2626; border-color: #fca5a5; }

.rc102-quiz-score {
	font-size: 13px;
	color: #64748b;
	margin-top: 1rem;
}

/* ── CHORD LIBRARY ─────────────────────────────────────────────── */

.rc102-chord-root-section {
	margin-bottom: 1rem;
}

.rc102-section-label {
	font-size: 11px;
	font-weight: 600;
	color: #64748b;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	margin-bottom: 8px;
}

.rc102-chord-natural-row {
	display: grid;
	grid-template-columns: repeat(7, 1fr);
	gap: 6px;
}

/* Mobile and Desktop Users that scale their browser window down fallback: a single flat, wrapping row of all 17 roots in
   chromatic order. Hidden by default (desktop/tablet uses the two-row
   piano-style layout above); shown instead of that layout below the
   site's existing 960px mobile breakpoint, since the floating
   accidental-pair positioning doesn't have enough room to avoid
   collisions at narrow phone widths. */
.rc102-chord-root-row-mobile {
	display: none;
	flex-wrap: wrap;
	gap: 6px;
}

.rc102-chord-accidental-row {
	display: grid;
	grid-template-columns: repeat(7, 1fr);
	gap: 6px;
	margin-bottom: 6px;
	min-height: 32px;
}

.rc102-accidental-pair {
	display: flex;
	gap: 0;
	width: max-content;
	justify-self: start;
	position: relative;
	transform: translateX(-50%);
}

.rc102-accidental-pair .rc102-root-btn {
	padding: 6px 9px;
	font-size: 12px;
}

.rc102-accidental-pair .rc102-root-btn:first-child {
	border-radius: 8px 0 0 8px;
	border-right-width: 0;
	/* Always positioned/elevated, not just on hover — z-index can't be
	   transitioned, so if it only applied during :hover it would snap
	   back the instant the mouse leaves, dropping this button below its
	   sibling mid-fade and clipping the box-shadow below before its own
	   0.15s transition finishes. Keeping the stacking order constant at
	   all times means there's nothing to snap, so the fade-out timing
	   matches the other three sides exactly. */
	position: relative;
	z-index: 1;
}

/* On hover/active, the sharp button's right edge should look like it has
   a complete blue outline too. A real border-right would add 1px of
   layout width and shift the whole pair (it's centered on its own total
   width via translateX) — so instead we paint the line with box-shadow,
   which is purely visual and never affects box size or layout. The flat
   button's own left border stays exactly as it always is underneath;
   this just lays a matching highlight on top when the sharp side is
   the one being interacted with, keeping exactly one visible line at
   the seam in every state, with zero width change in any of them. */
.rc102-accidental-pair .rc102-root-btn:first-child:hover,
.rc102-accidental-pair .rc102-root-btn:first-child.active {
	box-shadow: 1px 0 0 0 #256BA8;
}

.rc102-accidental-pair .rc102-root-btn:last-child {
	border-radius: 0 8px 8px 0;
}

/* Placed AFTER every base rule above so the cascade resolves correctly —
   a media query earlier in the file loses to a later same-specificity
   base rule on the same property, even while its condition is true. */
@media (max-width: 960px) {
	.rc102-chord-accidental-row,
	.rc102-chord-natural-row {
		display: none;
	}
	.rc102-chord-root-row-mobile {
		display: flex;
	}
}

.rc102-root-btn {
	padding: 7px 13px;
	font-size: 14px;
	font-weight: 600;
	border-radius: 8px;
	border: 1px solid #e2e8f0;
	background: #f8fafc;
	color: #334155;
	cursor: pointer;
	transition: all 0.15s;
	text-align: center;
	line-height: 1.2;
}

.rc102-root-btn:hover { border-color: #256BA8; color: #256BA8; }
.rc102-root-btn.active { background: #256BA8; color: #fff; border-color: #256BA8; }

.rc102-chord-type-row {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin-bottom: 1.5rem;
	padding-bottom: 1.5rem;
	border-bottom: 1px solid #f1f5f9;
}

.rc102-type-btn {
	padding: 6px 14px;
	font-size: 13px;
	font-weight: 500;
	border-radius: 8px;
	border: 1px solid #e2e8f0;
	background: #f8fafc;
	color: #64748b;
	cursor: pointer;
	transition: all 0.15s;
	line-height: 1.2;
}

.rc102-type-btn:hover { color: #256BA8; border-color: #256BA8; }
.rc102-type-btn.active { background: #256BA8; color: #fff; border-color: #256BA8; }

/* Nav arrows + diagram area */
.rc102-chord-nav-area {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 1rem;
	min-height: 220px;
}

.rc102-nav-arrow {
	width: 38px;
	height: 38px;
	border-radius: 50%;
	border: 1px solid #e2e8f0;
	background: #f8fafc;
	color: #334155;
	font-size: 18px;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	transition: all 0.15s;
	line-height: 1;
}

.rc102-nav-arrow:hover { background: #f1f5f9; border-color: #cbd5e1; }
.rc102-nav-arrow[style*="hidden"] { pointer-events: none; }

.rc102-chord-display {
	display: flex;
	justify-content: center;
	align-items: flex-start;
}

/* Voicing indicator dots */
.rc102-voicing-indicator {
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 8px;
	margin-top: 1rem;
	height: 8px; /* matches dot height — reserves space even when hidden/empty so Play Chord button doesn't shift for single-voicing chords */
}

.rc102-voicing-dot {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: #e2e8f0;
	cursor: pointer;
	transition: background 0.15s;
	display: inline-block;
	border: none;
	padding: 0;
	font: inherit;
	-webkit-appearance: none;
	appearance: none;
}

.rc102-voicing-dot.active { background: #256BA8; }
.rc102-voicing-dot:hover { background: #94a3b8; }
/* Higher specificity than the two rules above (two classes instead of
   one), so the currently-selected dot stays blue while hovered instead
   of momentarily looking unselected — this is intentionally NOT solved
   by just reordering the two rules above, since equal-specificity rules
   are fragile to reorder; a combined, more-specific rule wins regardless
   of where anything else ends up in the file later. */
.rc102-voicing-dot.active:hover { background: #256BA8; }

.rc102-no-chord {
	color: #64748b;
	font-size: 14px;
	margin-top: 2rem;
	text-align: center;
}