/* Ray's Ukulele Tabs — matches the site's Elementor kit:
   primary #E98A3B, secondary/cream #FFF8EE, text #58595F, accent #FFD84B, blue #8EC9FF,
   Raleway (headings) + Lato (body). */

.rut-single, .rut-archive, .rut-chord-tip, #rut-preview, .rut-crosslink {
	--rut-primary: #E98A3B;
	--rut-primary-dark: #C96F24;
	--rut-cream: #FFF8EE;
	--rut-cream-border: #F2E3CC;
	--rut-text: #58595F;
	--rut-heading: #3A3B40;
	--rut-accent: #FFD84B;
	--rut-blue: #8EC9FF;
	--rut-radius: 12px;
	--rut-shadow: 0 2px 12px rgba(89, 60, 20, 0.08);
	font-family: 'Lato', -apple-system, BlinkMacSystemFont, sans-serif;
	color: var(--rut-text);
}

/* ---------- Meta chips ---------- */

.rut-meta-bar {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 4px 0 18px;
	align-items: center;
}

.rut-chip {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	font-family: 'Raleway', sans-serif;
	font-size: 13px;
	font-weight: 600;
	line-height: 1;
	padding: 7px 12px;
	border-radius: 999px;
	background: var(--rut-cream);
	border: 1px solid var(--rut-cream-border);
	color: var(--rut-text);
	text-decoration: none;
}

a.rut-chip:hover {
	border-color: var(--rut-primary);
	color: var(--rut-primary-dark);
}

.rut-chip-artist {
	background: #FFF;
	border-color: var(--rut-primary);
	color: var(--rut-primary-dark);
}

.rut-diff-beginner { background: #E8F6E4; border-color: #BCE3B2; color: #3E7A33; }
.rut-diff-intermediate { background: #FFF3CC; border-color: #F2DA85; color: #8A6D00; }
.rut-diff-advanced { background: #FDE9D9; border-color: #F3C79C; color: #B35C10; }

.rut-chip-score {
	background: var(--rut-heading);
	border-color: var(--rut-heading);
	color: #FFF;
}

/* ---------- Thumbs up/down vote widget ---------- */

.rut-vote {
	display: inline-flex;
	align-items: center;
	gap: 2px;
	background: #FFF;
	border: 1px solid var(--rut-cream-border);
	border-radius: 999px;
	padding: 3px 5px;
	box-shadow: var(--rut-shadow);
}

.rut-vote-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	color: #9B9CA3;
	background: transparent;
	border: 0;
	border-radius: 999px;
	padding: 8px 10px;
	cursor: pointer;
	transition: color 0.12s ease, background 0.12s ease;
}

.rut-vote-btn:hover { background: var(--rut-cream); color: var(--rut-heading); }

.rut-like-icon { width: 15px; height: 15px; fill: currentColor; flex-shrink: 0; }

.rut-vote-down .rut-like-icon { transform: rotate(180deg); }

.rut-vote-up.rut-vote-active { color: #FFF; background: var(--rut-primary); }
.rut-vote-down.rut-vote-active { color: #FFF; background: var(--rut-heading); }

.rut-vote-score {
	min-width: 34px;
	text-align: center;
	font-family: 'Raleway', sans-serif;
	font-weight: 700;
	font-size: 16px;
	color: var(--rut-heading);
}

.rut-vote-busy { opacity: 0.6; pointer-events: none; }

.rut-card-score .rut-like-icon, .rut-versions-meta .rut-like-icon {
	width: 13px;
	height: 13px;
	vertical-align: -1.5px;
}

/* ---------- Other versions ---------- */

.rut-versions {
	background: var(--rut-cream);
	border: 1px solid var(--rut-cream-border);
	border-radius: var(--rut-radius);
	padding: 20px 24px;
	margin-bottom: 26px;
}

.rut-versions-title {
	font-family: 'Raleway', sans-serif;
	font-size: 18px;
	font-weight: 600;
	color: var(--rut-heading);
	margin: 0 0 10px;
}

.rut-versions ul { margin: 0; padding: 0; list-style: none; }
.rut-versions li { padding: 5px 0; }
.rut-versions a { color: var(--rut-primary-dark); font-weight: 700; text-decoration: none; }
.rut-versions a:hover { text-decoration: underline; }
.rut-versions-meta { color: #9B9CA3; font-size: 14px; }

/* ---------- Auth (signup / login) ---------- */

.rut-auth {
	background: #FFF;
	border: 1px solid var(--rut-cream-border);
	border-radius: var(--rut-radius);
	box-shadow: var(--rut-shadow);
	padding: 30px;
	max-width: 460px;
	margin: 0 auto;
}

.rut-auth-title {
	font-family: 'Raleway', sans-serif;
	font-size: 24px;
	font-weight: 600;
	color: var(--rut-heading);
	margin: 0 0 6px;
}

.rut-auth-sub { margin: 0 0 18px; font-size: 15px; }

.rut-auth-tabs {
	display: flex;
	gap: 6px;
	background: var(--rut-cream);
	border-radius: 999px;
	padding: 4px;
	margin-bottom: 20px;
}

.rut-auth-tab {
	flex: 1;
	font-family: 'Raleway', sans-serif;
	font-size: 13.5px;
	font-weight: 700;
	color: var(--rut-text);
	background: transparent;
	border: 0;
	border-radius: 999px;
	padding: 9px 10px;
	cursor: pointer;
}

.rut-auth-tab-active {
	background: #FFF;
	color: var(--rut-primary-dark);
	box-shadow: 0 1px 4px rgba(89, 60, 20, 0.12);
}

.rut-auth-form { display: flex; flex-direction: column; gap: 14px; }

.rut-auth-form .rut-btn { margin-top: 4px; }

.rut-auth-lost {
	font-size: 13.5px;
	text-align: center;
	color: #9B9CA3;
}

/* ---------- Submit form ---------- */

.rut-submit-form {
	background: #FFF;
	border: 1px solid var(--rut-cream-border);
	border-radius: var(--rut-radius);
	box-shadow: var(--rut-shadow);
	padding: 28px;
}

.rut-form-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 16px 18px;
}

.rut-field { display: flex; flex-direction: column; gap: 6px; margin: 0; }
.rut-field-wide { grid-column: 1 / -1; }

.rut-field > span, .rut-field-label {
	font-family: 'Raleway', sans-serif;
	font-size: 13px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	color: var(--rut-heading);
}

.rut-field em { color: var(--rut-primary-dark); font-style: normal; }

.rut-field input, .rut-field select, .rut-field textarea {
	font-family: 'Lato', sans-serif;
	font-size: 16px;
	color: var(--rut-text);
	background: #FFF;
	border: 1px solid var(--rut-cream-border);
	border-radius: 8px;
	padding: 10px 14px;
	outline: none;
}

.rut-field textarea {
	font-family: ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
	font-size: 14px;
	line-height: 1.6;
}

.rut-field input:focus, .rut-field select:focus, .rut-field textarea:focus { border-color: var(--rut-primary); }

.rut-format-help {
	font-size: 14px;
	color: #9B9CA3;
	background: var(--rut-cream);
	border-radius: 8px;
	padding: 10px 14px;
	margin: 0;
}

.rut-format-help code { background: #FFF; padding: 1px 5px; border-radius: 4px; font-size: 13px; }

.rut-hp { position: absolute !important; left: -9999px !important; height: 0; opacity: 0; }

.rut-form-actions { display: flex; gap: 10px; margin-top: 20px; }

.rut-form-msg { border-radius: 8px; padding: 14px 18px; margin-top: 16px; font-weight: 700; }
.rut-form-msg-ok { background: #E8F6E4; color: #3E7A33; }
.rut-form-msg-error { background: #FDE3E3; color: #B03030; }

/* ---------- Toolbar ---------- */

.rut-toolbar {
	position: sticky;
	top: 12px;
	z-index: 40;
	display: flex;
	flex-wrap: wrap;
	gap: 10px 18px;
	align-items: center;
	background: #FFF;
	border: 1px solid var(--rut-cream-border);
	border-radius: var(--rut-radius);
	box-shadow: var(--rut-shadow);
	padding: 10px 16px;
	margin-bottom: 16px;
}

body.admin-bar .rut-toolbar { top: 44px; }

.rut-tool {
	display: flex;
	align-items: center;
	gap: 7px;
}

.rut-tool-label {
	font-family: 'Raleway', sans-serif;
	font-size: 12px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: #9B9CA3;
}

.rut-btn {
	font-family: 'Raleway', sans-serif;
	font-size: 14px;
	font-weight: 700;
	line-height: 1;
	color: var(--rut-heading);
	background: var(--rut-cream);
	border: 1px solid var(--rut-cream-border);
	border-radius: 999px;
	padding: 9px 14px;
	cursor: pointer;
	transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.rut-btn:hover {
	background: #FBEEDB;
	border-color: var(--rut-primary);
	color: var(--rut-primary-dark);
}

.rut-btn-primary {
	background: var(--rut-primary);
	border-color: var(--rut-primary);
	color: #FFF;
}

.rut-btn-primary:hover {
	background: var(--rut-primary-dark);
	border-color: var(--rut-primary-dark);
	color: #FFF;
}

.rut-btn-primary.rut-scrolling {
	background: var(--rut-heading);
	border-color: var(--rut-heading);
}

.rut-scroll-icon { font-size: 11px; }

.rut-tr-value {
	min-width: 30px;
	text-align: center;
	font-family: 'Raleway', sans-serif;
	font-weight: 700;
	font-size: 15px;
}

.rut-tr-value.rut-tr-active { color: var(--rut-primary-dark); }

#rut-scroll-speed {
	width: 90px;
	accent-color: #E98A3B;
}

/* ---------- Chord diagrams panel ---------- */

.rut-chord-panel {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-bottom: 16px;
}

/* Diagram style matches Ray's video chord charts: heavy black grid,
   thick nut, solid black dots, bold black chord name. */
.rut-diagram {
	background: #FFF;
	border: 1px solid var(--rut-cream-border);
	border-radius: 10px;
	padding: 9px 2px 0;
}

.rut-diagram-svg { width: 84px; height: auto; display: block; }

.rut-dg-name {
	font-family: 'Open Sans', 'Arial Black', sans-serif;
	font-size: 19px;
	font-weight: 800;
	fill: #141414;
}

.rut-dg-line { stroke: #141414; stroke-width: 1.8; }
.rut-dg-nut { fill: #141414; }
.rut-dg-dot { fill: #141414; }
.rut-dg-barre { fill: #141414; }
.rut-dg-fret { font-family: 'Lato', sans-serif; font-size: 10px; fill: #9B9CA3; }

.rut-diagram-missing {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 82px;
	height: 116px;
}

.rut-dg-fallback {
	font-family: 'Raleway', sans-serif;
	font-weight: 700;
	color: #9B9CA3;
}

/* ---------- Tab sheet ---------- */

.rut-sheet {
	background: #FFF;
	border: 1px solid var(--rut-cream-border);
	border-radius: var(--rut-radius);
	box-shadow: var(--rut-shadow);
	padding: 30px 34px;
	margin-bottom: 26px;
	font-family: ui-monospace, 'SF Mono', 'Roboto Mono', Menlo, Consolas, monospace;
	font-size: 15px;
	line-height: 1.5;
	overflow-x: auto;
}

.rut-line { margin: 0; }
.rut-space { height: 1.1em; }

.rut-seg {
	display: inline-block;
	vertical-align: bottom;
}

.rut-c {
	display: block;
	min-height: 1.45em;
	padding-right: 0.45em;
	font-weight: 700;
	color: var(--rut-primary-dark);
	cursor: pointer;
	border-radius: 4px;
	outline: none;
}

.rut-c:hover, .rut-c:focus { color: var(--rut-primary); text-decoration: underline; text-decoration-style: dotted; text-underline-offset: 3px; }

.rut-c-empty { cursor: default; }

.rut-l { display: block; white-space: pre-wrap; }

.rut-nochord .rut-l, .rut-nochord { white-space: pre-wrap; }

.rut-chordline { line-height: 1.9; }
.rut-chordline .rut-c { display: inline-block; min-height: 0; }
.rut-gap { display: inline-block; width: 0.6em; }

.rut-section {
	font-family: 'Raleway', sans-serif;
	font-size: 0.86em;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.09em;
	color: var(--rut-heading);
	margin: 1.4em 0 0.5em;
}

.rut-sheet-body > .rut-section:first-child { margin-top: 0; }

.rut-section span {
	display: inline-block;
	border-bottom: 3px solid var(--rut-accent);
	padding-bottom: 3px;
}

.rut-note {
	font-style: italic;
	color: #9B9CA3;
	margin: 0.4em 0;
}

/* ---------- Cross-link callout (tab <-> tutorial post) ---------- */

.rut-crosslink {
	background: var(--rut-cream);
	border: 1px solid var(--rut-cream-border);
	border-left: 4px solid var(--rut-primary);
	border-radius: 10px;
	padding: 16px 20px;
	margin: 22px 0 26px;
	font-family: 'Lato', -apple-system, sans-serif;
	font-size: 16px;
	color: var(--rut-text);
	line-height: 1.5;
}

.rut-crosslink-kicker {
	font-family: 'Raleway', sans-serif;
	font-weight: 700;
	color: var(--rut-heading);
}

.rut-crosslink a {
	color: var(--rut-primary-dark);
	font-weight: 700;
	text-decoration: none;
}

.rut-crosslink a:hover { text-decoration: underline; }

/* ---------- Related tabs ---------- */

.rut-related { margin-bottom: 26px; }

.rut-related-title {
	font-family: 'Raleway', sans-serif;
	font-size: 22px;
	font-weight: 600;
	color: var(--rut-heading);
	margin: 0 0 14px;
}

.rut-grid-related { margin-bottom: 0; }

/* ---------- Chord tooltip ---------- */

.rut-chord-tip {
	position: absolute;
	z-index: 999;
	filter: drop-shadow(0 4px 10px rgba(58, 59, 64, 0.22));
}

.rut-chord-tip .rut-diagram { background: #FFF; }

/* ---------- Video ---------- */

.rut-video { margin-bottom: 26px; }

.rut-video-title {
	font-family: 'Raleway', sans-serif;
	font-size: 22px;
	font-weight: 600;
	color: var(--rut-heading);
	margin: 0 0 12px;
}

.rut-video-frame {
	position: relative;
	padding-top: 56.25%;
	border-radius: var(--rut-radius);
	overflow: hidden;
	box-shadow: var(--rut-shadow);
}

.rut-video-frame iframe {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: 0;
}

.rut-backlink {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: 10px;
}

.rut-backlink a {
	font-family: 'Raleway', sans-serif;
	font-weight: 600;
	color: var(--rut-primary-dark);
	text-decoration: none;
}

.rut-backlink a:hover { text-decoration: underline; }

/* Archive hero title row with submit CTA */
.rut-archive-titlerow {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 14px;
}

.rut-hero-submit { text-decoration: none; display: inline-block; }

/* ---------- Archive ---------- */

.rut-wrap {
	max-width: 1080px;
	margin: 0 auto;
	padding: 0 20px;
}

.rut-archive-hero {
	background: var(--rut-cream);
	border-bottom: 1px solid var(--rut-cream-border);
	padding: 48px 0 34px;
	margin-bottom: 30px;
}

.rut-archive-title {
	font-family: 'Raleway', sans-serif;
	font-size: 40px;
	font-weight: 600;
	line-height: 1.2;
	color: var(--rut-heading);
	margin: 0 0 10px;
}

.rut-archive-intro {
	font-size: 17px;
	max-width: 640px;
	margin: 0 0 22px;
}

.rut-filters { margin: 0; }

.rut-search-box {
	display: flex;
	gap: 10px;
	max-width: 560px;
	margin-bottom: 14px;
}

.rut-search-box input[type="search"] {
	flex: 1;
	font-family: 'Lato', sans-serif;
	font-size: 16px;
	padding: 11px 18px;
	border: 1px solid var(--rut-cream-border);
	border-radius: 999px;
	background: #FFF;
	color: var(--rut-text);
	outline: none;
}

.rut-search-box input[type="search"]:focus { border-color: var(--rut-primary); }

.rut-filter-row {
	display: flex;
	flex-wrap: wrap;
	gap: 16px;
}

.rut-filter {
	display: flex;
	align-items: center;
	gap: 8px;
	font-family: 'Raleway', sans-serif;
	font-size: 13px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	color: #9B9CA3;
}

.rut-filter select {
	font-family: 'Lato', sans-serif;
	font-size: 15px;
	padding: 8px 12px;
	border: 1px solid var(--rut-cream-border);
	border-radius: 8px;
	background: #FFF;
	color: var(--rut-text);
}

.rut-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
	gap: 14px;
	margin-bottom: 34px;
}

.rut-card {
	display: flex;
	justify-content: space-between;
	gap: 12px;
	background: #FFF;
	border: 1px solid var(--rut-cream-border);
	border-radius: var(--rut-radius);
	padding: 18px 20px;
	text-decoration: none;
	color: var(--rut-text);
	box-shadow: var(--rut-shadow);
	transition: transform 0.12s ease, border-color 0.12s ease;
}

.rut-card:hover {
	transform: translateY(-2px);
	border-color: var(--rut-primary);
}

.rut-card-title {
	font-family: 'Raleway', sans-serif;
	font-size: 18px;
	font-weight: 600;
	color: var(--rut-heading);
	margin: 0 0 4px;
	line-height: 1.3;
}

.rut-card:hover .rut-card-title { color: var(--rut-primary-dark); }

.rut-card-artist { font-size: 14px; }

.rut-card-side {
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	justify-content: space-between;
	gap: 8px;
	flex-shrink: 0;
}

.rut-card-score {
	font-family: 'Raleway', sans-serif;
	font-size: 14px;
	font-weight: 700;
	color: var(--rut-primary-dark);
	white-space: nowrap;
}

.rut-card-tags {
	display: flex;
	gap: 6px;
}

.rut-card-tags .rut-chip { font-size: 11px; padding: 5px 9px; }

.rut-pagination { margin: 0 0 50px; text-align: center; }

.rut-pagination .nav-links {
	display: inline-flex;
	gap: 6px;
	align-items: center;
	font-family: 'Raleway', sans-serif;
	font-weight: 600;
}

.rut-pagination .page-numbers {
	padding: 8px 14px;
	border-radius: 999px;
	border: 1px solid var(--rut-cream-border);
	background: #FFF;
	color: var(--rut-text);
	text-decoration: none;
}

.rut-pagination .page-numbers.current {
	background: var(--rut-primary);
	border-color: var(--rut-primary);
	color: #FFF;
}

.rut-pagination .page-numbers:hover:not(.current) { border-color: var(--rut-primary); color: var(--rut-primary-dark); }

.rut-empty {
	text-align: center;
	padding: 40px 0 70px;
	font-size: 17px;
}

.rut-empty a { color: var(--rut-primary-dark); font-weight: 700; }

/* ---------- Responsive ---------- */

@media (max-width: 640px) {
	.rut-sheet { padding: 20px 16px; }
	.rut-archive-title { font-size: 30px; }
	.rut-archive-hero { padding: 32px 0 24px; }
	.rut-toolbar { gap: 8px 12px; padding: 8px 12px; }
	.rut-btn { padding: 8px 12px; font-size: 13px; }
	#rut-scroll-speed { width: 70px; }
	.rut-card { flex-direction: column; }
	.rut-card-side { flex-direction: row; align-items: center; justify-content: space-between; width: 100%; }
	.rut-form-grid { grid-template-columns: 1fr; }
	.rut-submit-form { padding: 18px; }
}

/* Admin preview */
#rut-preview .rut-sheet { box-shadow: none; }

/* ---------- Print (also "save as PDF") ---------- */

.rut-print-header { display: none; }

@media print {
	/* Hide site chrome; the tab itself carries its own print header. */
	#wpadminbar, header, footer, nav, aside,
	.elementor-location-header, .elementor-location-footer,
	#masthead, #colophon, .nv-sidebar-wrap,
	.rut-toolbar, .rut-vote, .rut-video, .rut-backlink, .rut-versions,
	.rut-meta-bar, .rut-chord-tip,
	[id^="om-"] {
		display: none !important;
	}

	/* Theme page title duplicates the print header. */
	.rut-single { color: #000; }
	h1.entry-title, .page-header, .nv-page-title, .elementor-page-title {
		display: none !important;
	}

	.rut-print-header {
		display: block;
		border-bottom: 3px solid #000;
		padding-bottom: 8px;
		margin-bottom: 14px;
	}

	.rut-ph-title {
		font-family: 'Raleway', 'Arial Black', sans-serif;
		font-size: 22pt;
		font-weight: 800;
		color: #000;
	}

	.rut-ph-meta {
		font-family: 'Lato', sans-serif;
		font-size: 10pt;
		color: #333;
		margin-top: 2px;
	}

	.rut-chord-panel { gap: 4px; margin-bottom: 10px; }
	.rut-diagram { border: none; padding: 0; }
	.rut-diagram-svg { width: 68px; }

	.rut-sheet {
		border: none;
		box-shadow: none;
		padding: 0;
		font-size: 10.5pt;
		overflow: visible;
	}

	.rut-c { color: #000; }
	.rut-section span { border-bottom-color: #000; }
	.rut-note { color: #444; }
	.rut-space { break-inside: avoid; }
	.rut-line { break-inside: avoid; }
}