/* song page base styles (album card, how-to-read, layout).
   Extracted verbatim from content-classic-test.php on 2026-06-10
   (audit PERF-07 stage B): same rules, same cascade position via an
   in-place <link>, now cacheable instead of re-sent in every HTML. */

/* album achtegrond: dead gold-colorway duplicate removed 2026-06-10 (audit PERF-07 stage A).
   The sidebar's .album rule (same specificity, later in the document) always won; its
   pattern now loads from utimages/album-topo-dark.svg. Gold original kept in local Archive. */

/* how to read chord charts link — sits in the top-right corner of the chord box */
.howtoread {
	position: absolute;
	color: #504f49;
	right: -5px;
	top: -5px;
	font-size: 10px;
	background: #00000017;
	padding: 2px 4px 2px 4px;
	border-radius: 0 0 0 5px;
	text-decoration: none;
}
.howtoread:hover,
.howtoread:focus {
	color: #504f49 !important;        /* keep same colour — overrides the global a:hover yellow */
	text-decoration: underline;
	text-underline-offset: 2px;
}

@media (max-width:1399px) {
	.howtoread {
		position: absolute;
		color: #504f49;
		right: -5px;
		top: -5px;
		font-size: 8px;
		background: #00000017;
		padding: 0px 4px 1px 4px;
		border-radius: 0 0 0 5px;
	}
}

/* liedje tekst */
pre.qoate-code {
	-moz-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.6);
	-webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.6);
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.6);
	background: #fdfdfd url('/wp-content/themes/olympus/utimages/bg_notelight.png') repeat top;
	color: #6e6e6e !important;
	line-height: 22px;
	border: 1px solid #efeee2 !important;
	text-shadow: 1px 1px 0 #fff;
	border-radius: 5px;
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
	padding: 0 10px 22px !important;
	white-space: pre-wrap !important;
	margin: 0 0 15px;
	word-wrap: break-word !important;
	color: #000 !important;
	box-shadow: 0 3px 10px #999;
	-moz-box-shadow: 0 3px 10px #999;
	-webkit-box-shadow: 0 3px 10px #999;
	overflow: visible;
	font-size: 13px;
}

/* wp ulike duimpjes omhoog/omlaag */
.wpulike-default{
  display: inline-block;
  vertical-align: bottom;
  padding:0 0 2px 0
}
.wpfp-link, .wpfplinknouser {
  vertical-align: middle
}

.wpulike-voters .wp_ulike_btn {
	/* height: 32px; */
	opacity: 0.6
}

.wp_ulike_btn_is_active{
  opacity:1!important
}

.wpulike button.wp_ulike_btn {
	padding: unset;
}

.wpulike-voters .wp_ulike_btn:hover {
	opacity: 1
}

.wp_ulike_counter_down {
	display: none
}

.wpulike-voters {
	padding: 0 5px 0;
background: rgb(146, 125, 226);
background: -moz-linear-gradient(90deg, rgba(146, 125, 226, 1) 0%, rgba(245, 140, 121, 1) 100%);
background: -webkit-linear-gradient(90deg, rgba(146, 125, 226, 1) 0%, rgba(245, 140, 121, 1) 100%);
background: linear-gradient(90deg, rgba(146, 125, 226, 1) 0%, rgba(245, 140, 121, 1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#927de2", endColorstr="#f58c79", GradientType=1);
color: #fff;
font-weight: bold;
display: inline-block;
border-radius: 5px;
margin: 5px;
vertical-align:middle
}

.wpulike-voters .wp_ulike_put_image:after {
width: 28px;
height: 28px;
}

.wpulike-voters button.wp_ulike_btn {
padding: 0px 15px 0px 0;
width: 28px;
height: 32px;
}

@media (max-width: 420px) {
.wpulike-voters .count-box {
	padding: 0 5px;
	font-size: 12px;
	line-height: 24px;
}
}

@media (max-width: 380px) {
	.wpulike-voters .count-box {
		padding: 0 2px;
		font-size: 9px;
		line-height: 24px;
	}
}

/* chords in this song */
.cits-c {
	padding: 9px 10px 1px 0px;
	box-shadow: inset 0 0 20px #b4b3a6;
	border-radius: 5px;
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
	width: 100px;
	height: auto;
}

/* Chord-card wrapper.
   Uses an inset shadow (rather than the legacy outer drop-shadow) to
   give the card a soft, recessed paper feel — matches the look of the
   pre-SVG <img> diagrams that visitors associated with the site for
   years. Padding centres the SVG horizontally and gives the chord-name
   title a bit of breathing room at the top. */
.cits-c-b {
	display: inline-block;
	vertical-align: middle;
	margin: 7px;
	padding: 6px 12px 10px;
border-radius: 8px;
	-moz-border-radius: 8px;
	-webkit-border-radius: 8px;
	box-shadow: 1px 1px 5px #999;
	-moz-box-shadow: 1px 1px 5px #999;
	-webkit-box-shadow: 1px 1px 5px #999;
	padding: 3px;
	margin: 7px;
	background: #fbfbf1;
	position: relative;        /* anchor for the ::after watermark */
}
/* Watermark removed. Used to be a CSS-generated "ukutabs.com" via
   .uku-chord-card::after (replacing an earlier inline <text> the SVG
   renderers emitted; gated to CSS so search engines wouldn't index
   the literal "ukutabs.com" inside every chord card). The renderers
   already drop their inline <text> watermark — both the song template
   (mount.js: watermark:false) and the chord-render PHP call here
   (line ~3442: 'watermark' => false). Removed to match the cleaner
   tool-page chord-diagram look and remove the rotated text from the
   right edge of every card. */

/* The SVG itself. Pin to a uniform height so every chord card lines up
   regardless of fret-row count (mandolin = 5 rows, the rest = 4) and
   string count (guitar = 6, ukulele/mandolin = 4). Width scales from
   the SVG's viewBox so aspect ratio is preserved. */
.uku-chord-svg {
	display: block;
	height: 140px;
	width: auto;
	margin: 0 auto;
	font-size: 9px!important;
	box-shadow: inset 0 0 20px #b4b3a6;
	border-radius: 5px;
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
	padding: 8px 3px 0 0;
}

/* ── Simplify / hide-easy: hidden states + pill bar ─────────────────
   Driven by uku-chord-simplify-test.js. .cits-dedup-hide is set when
   a diagram becomes a duplicate after simplification (e.g. song has
   both A and A7, both simplify to A). .cits-easy-hide is set on
   diagrams whose post-simplify chord is in the EASY list. Selectors
   are class-only so they also apply to .cits-c-b nodes inside the
   floating .sticky-chords clone. */
.cits-c-b.cits-dedup-hide,
.cits-c-b.cits-easy-hide { display: none; }

/* Pill bar — sits BELOW the diagrams. JS hides it when chord count
   <= 4 (simple songs don't need this UI). Lives outside
   #chords-in-this-song so the legacy sticky-chord cloner doesn't
   pick it up. */
.uku-cits-controls {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	justify-content: center;
	margin: 12px auto 0;
}
.uku-cits-controls[hidden] { display: none; }
.uku-cits-pill {
	appearance: none;
	border: 1px solid rgba(0,0,0,.1);
	background: #e8e6d8;
	color: #6b6a5e;
	font-size: 12px;
	font-weight: 600;
	padding: 5px 12px;
	border-radius: 999px;
	cursor: pointer;
	transition: background .15s, color .15s, border-color .15s;
	line-height: 1.3;
}
.uku-cits-pill:hover { background: #dcdac6; color: #45443f; }
.uku-cits-pill[aria-pressed="true"] {
	background: #bebeb4;
	color: #45443f;
	border-color: rgba(0,0,0,.2);
}
.uku-cits-pill[aria-pressed="true"]:hover { background: #b0b0a4; }
.uku-cits-pill i { margin-right: 4px; opacity: .8; }
/* Hidden-count badge — small dark circle with light number. Only
   appears when the hide filter is actually hiding something. */
.uku-cits-pill .uku-cits-count {
	display: inline-block;
	min-width: 16px;
	height: 16px;
	padding: 0 4px;
	margin-left: 6px;
	border-radius: 999px;
	background: #45443f;
	color: #f5f1e4;
	font-size: 10px;
	font-weight: 700;
	line-height: 16px;
	text-align: center;
	vertical-align: 1px;
	box-sizing: border-box;
}

.cits-tooltip {
	background: #fbfbf1;
}

.ukutabschord .tooltip>.tooltip-inner {
	padding: 2px !important;
	border: none !important;
	background-color: #252525 !important;
	box-shadow: 0 0 5px #000 !important;
	border-radius: 5px !important;
}

/* sticky akkoorden lopen mee op pagina */
.sticky-chords-close {
	left: -50px;
	top: 13px;
	z-index: 1;
	font-family: none;
	font-size: 29px;
	color: #f5f1e4 !important;
	text-shadow: -1px -1px 1px #763224;
	width: 30px;
	height: 39px;
	line-height: 25px;
	display: block !important;
	position: absolute;
	background: url('/wp-content/themes/olympus/utimages/button_stickychords.png') no-repeat;
	opacity: 0.5;
	transform: scale(1.3) !important;
}

.sticky-chords .sticky-chords-close:before {
	content: "\00AB";
	margin-left: 7px;
}

.sticky-chords.hide .sticky-chords-close:before {
	content: "\00BB";
	margin-left: 7px;

}

.sticky-chords {
	position: fixed;
	z-index: 1;
	top: 60px !important;          /* clears the sticky toolbar at every breakpoint */
	height: 0;
	opacity: 0.95;
	text-align: left !important;
	/* Card sizing is done in real CSS pixels via `.sticky-chords .uku-chord-svg`
	   below — no `transform: scale()` here (would double-scale the new SVG
	   pipeline and skew the layout footprint vs the visual render). */
	/* `left` and `width` are JS-driven (uku-stickychords.js → alignToContent)
	   so the strip's bounds match the content column instead of overflowing
	   into the sidebar on wide screens. white-space:normal lets cards wrap
	   to multiple lines when there are too many to fit on one row. */
	white-space: normal;
	/* No right-padding for the X — it sits absolute over the top-right
	   corner of the strip with a translucent background and high z-index,
	   so it can overlap the corner of the rightmost card. Reserving a
	   38px gutter for it cost a whole card column on tighter widths. */
}

.sticky-chords .cits-c-b {
	margin: 3px;
	padding: 3px;
}
/* The floating strip clones the chord-box; its diagrams are about
   ~⅔ the size of the in-page ones so the strip doesn't dominate the
   viewport while scrolling. Tweak this single number to resize the
   whole strip — wrapper paddings + margins follow naturally because
   the SVG drives card dimensions via its viewBox aspect ratio. */
.sticky-chords .uku-chord-svg { height: 95px; }
/* Tiny screens — shrink the SVG and tighten the wrapper padding so
   an extra chord or two fits per row before wrap. Single breakpoint
   by design; the strip's flex-wrap handles mid-sizes gracefully. */
@media (max-width: 420px) {
	.sticky-chords .cits-c-b      { padding: 2px; }
	.sticky-chords .uku-chord-svg { height: 90px; }
}

.sticky-chords.hide {
	display: none
}

.hide uke-chord,
.hide .cits-c,
.hide .cits-c-b {
	box-shadow: none !important;
	-moz-box-shadow: none !important;
	-webkit-box-shadow: none !important;
	border: 0px solid #fff !important;
	display: none !important;
}

.shorttitle {
	display: none
}

.fulltitle {
	display: block
}

@media (max-width: 1399px) {
	.cits-c {
		width: 91px;
		height: auto;
	}

	.cits-c-b {
		margin: 4px;
	}
	.uku-chord-svg { height: 130px; }
}

@media (max-width: 1200px) {

	.cits-c {
		width: 85px;
		height: auto;
		padding: 9px 9px 1px 0px;
	}

	.cits-c-b {
		margin: 3px;
	}
	.uku-chord-svg { height: 124px; }

	.shorttitle {
		display: block
	}

	.fulltitle {
		display: none
	}

	#sliderAmount_trans {
		display: none
	}
}

@media (max-width: 1024px) {

	.hoverchordpop {
		width: 88px !important;
	}

	.qoate-code a>i {
		left: 50%;
		margin-left: -44px;
	}
}

@media (width: 768px) {
	.shorttitle {
		display: block !important
	}

	.fulltitle {
		display: none !important
	}

	#sliderAmount_trans {
		display: none !important;
	}

}

@media(max-width:768px) {
	.single-post-v3-wrap.cits {
		margin: 0 !important
	}

}

/* (Old @media (max-width: 1024px) override for .sticky-chords removed —
   the JS-driven alignment in uku-stickychords.js (alignToContent)
   handles width and wrapping uniformly across all breakpoints now, so a
   special viewport-based calc is redundant.) */
@media (max-width: 1024px) {
	.shorttitle {
		display: none !important
	}

	.fulltitle {
		display: block !important
	}

	#sliderAmount_trans {
		display: inline-block !important;
	}

	/* Toolbar: compact on mobile — hide text labels (the global #ukutoolsbox reset
	   above already strips the wrapper chrome). */
	#wrapperheader { padding: 15px 15px 20px 15px !important; }
	.uku-asc-play-lbl,
	.uku-fav-lbl { display: none; }
	.uku-asc-play { padding: 0 10px; gap: 5px; }
}

/* On phone widths: swap 5 speed pills for stepper (−/n/+), shrink controls a tad
   (36px) for tighter fit, fav collapses to a 32px circle, flat/sharp in popover.
   NOTE: !important everywhere because the base rules for these elements live LATER in
   the file (~lines 1660+) and CSS source order would otherwise overwrite our mobile sizes. */
@media (max-width: 600px) {
	.uku-asc-speeds        { display: none !important; }
	.uku-asc-speed-stepper { display: flex !important; }
	/* All controls 36px on mobile — slightly smaller than the 40px earlier, tighter fit */
	.uku-asc-combined  { height: 36px !important; border-radius: 18px !important; }
	.uku-asc-spdstep   { width: 30px !important; height: 36px !important; font-size: 18px !important; }
	.uku-asc-spdval    { font-size: 14px !important; min-width: 22px !important; }
	.uku-asc-sp        { width: 26px !important; height: 26px !important; border-radius: 13px !important; font-size: 12px !important; }
	.uku-bar-pill      { height: 36px !important; min-width: 36px !important; border-radius: 18px !important; font-size: 17px !important; }
	.uku-settings-btn  { width: 36px !important; height: 36px !important; border-radius: 18px !important; font-size: 15px !important; }
	/* Match chord-vis to the same square circle as gear */
	.uku-chordvis-btn  { width: 36px !important; min-width: 36px !important; }
	.uku-chordvis-btn i { font-size: 15px; }
	/* Favorite collapses to a 32px circle on mobile — heart icon only.
	   Cap the WRAPPER too because the wpfp plugin renders an extra <span class="wpfp-span">
	   between .uku-fav-wrap and the actual <a>; without bounding it the icon ends up wide. */
	.uku-fav-wrap {
		width: 32px !important;
		min-width: 32px !important;
		max-width: 32px !important;
		flex: 0 0 32px;
	}
	.uku-fav-wrap .wpfp-link,
	.uku-fav-wrap .wpfp-span,
	.uku-fav-wrap .wpfp-span a,
	.uku-fav-pill {
		width: 32px !important;
		min-width: 32px !important;
		max-width: 32px !important;
		height: 32px !important;
		border-radius: 16px !important;
		padding: 0 !important;
		gap: 0 !important;
		justify-content: center !important;
		flex-shrink: 0;
		overflow: hidden;
	}
	/* Heart icon — override the inline style="font-size:14px;margin-right:10px" the
	   plugin emits, since on mobile the label is hidden and we don't want the icon
	   pushed off-center. */
	.uku-fav-wrap .wpfp-link > svg,
	.uku-fav-wrap .wpfp-link > i,
	.uku-fav-pill > i {
		font-size: 14px !important;
		width: 14px !important;
		height: 14px !important;
		margin: 0 !important;
	}
	/* Tap-target ergonomics for autoscroll buttons on iOS — manipulation kills the
	   300ms double-tap-zoom delay; tap-highlight removes the gray flash. */
	.uku-asc-play, .uku-asc-spdstep, .uku-asc-sp,
	.uku-transpose-btn, .uku-bar-pill, .uku-settings-btn {
		touch-action: manipulation;
		-webkit-tap-highlight-color: transparent;
	}
	.uku-transpose-wrap{ height: 36px !important; border-radius: 7px !important; }
	.uku-transpose-btn { width: 30px !important; height: 36px !important; font-size: 20px !important; }
	.uku-transpose-val { font-size: 14px !important; min-width: 28px !important; }
	.uku-bar-sep       { height: 24px !important; }
	/* KEY label stays visible on mobile, just trimmed slightly */
	.uku-tp-label      { font-size: 10px; letter-spacing: 0.4px; }
	/* Hide toolbar flat/sharp + its leading separator — it lives in the popover instead */
	.uku-bar-sep--flatsharp,
	#uku-flatsharp-btn { display: none !important; }
	/* Show the in-popover flat/sharp row */
	.uku-flatsharp-popover-row { display: flex !important; }
	/* Padding step-down from desktop's 10px */
	.fixedascro        { padding: 8px; }
}

@media (max-width: 480px) {
	.fixedascro { gap: 4px; padding: 6px; }
	.uku-settings-pop {
		min-width: 0;
		width: min(290px, calc(100vw - 20px));
		right: -6px;
	}
}

/* Smallest phones — drop the KEY label, take every control down to 32px (uniform with
   the heart) so the toolbar still fits comfortably on iPhone-class widths and below. */
@media (max-width: 450px) {
	.fixedascro       { gap: 3px; padding: 4px; }
	.uku-tp-label     { display: none; }
	.uku-asc-combined { height: 32px !important; border-radius: 16px !important; }
	.uku-asc-spdstep  { width: 28px !important; height: 32px !important; font-size: 17px !important; }
	.uku-asc-spdval   { font-size: 13px !important; min-width: 20px !important; }
	.uku-asc-sp       { width: 24px !important; height: 24px !important; border-radius: 12px !important; font-size: 11px !important; }
	.uku-bar-pill     { height: 32px !important; min-width: 32px !important; border-radius: 16px !important; font-size: 16px !important; }
	.uku-settings-btn { width: 32px !important; height: 32px !important; border-radius: 16px !important; font-size: 14px !important; }
	.uku-chordvis-btn { width: 32px !important; min-width: 32px !important; }
	.uku-chordvis-btn i { font-size: 14px; }
	.uku-transpose-wrap { height: 32px !important; border-radius: 6px !important; }
	.uku-transpose-btn  { width: 28px !important; height: 32px !important; font-size: 18px !important; }
	.uku-transpose-val  { font-size: 13px !important; min-width: 26px !important; }
	.uku-bar-sep        { height: 22px !important; }
}

/* Tightest phones — keep the bar's bg/rounded shape, shrink padding to a minimum,
   take controls down to 28px, and hide the meta-strip LEFTY toggle (it's still in the
   gear popover) so the star rating can fit. */
@media (max-width: 420px) {
	.fixedascro       { padding: 2px; gap: 3px; }
	/* Toolbar controls 28px — !important to beat the base rules later in the file */
	.uku-asc-combined { height: 28px !important; border-radius: 14px !important; }
	.uku-asc-spdstep  { width: 26px !important; height: 28px !important; font-size: 16px !important; }
	.uku-asc-spdval   { font-size: 12px !important; min-width: 18px !important; }
	.uku-asc-sp       { width: 22px !important; height: 22px !important; border-radius: 11px !important; font-size: 11px !important; }
	.uku-bar-pill     { height: 28px !important; min-width: 28px !important; border-radius: 14px !important; font-size: 14px !important; }
	.uku-settings-btn { width: 28px !important; height: 28px !important; border-radius: 14px !important; font-size: 12px !important; }
	.uku-chordvis-btn { width: 28px !important; min-width: 28px !important; }
	.uku-chordvis-btn i { font-size: 12px; }
	.uku-transpose-wrap { height: 28px !important; border-radius: 5px !important; }
	.uku-transpose-btn  { width: 26px !important; height: 28px !important; font-size: 16px !important; }
	.uku-transpose-val  { font-size: 12px !important; min-width: 24px !important; }
	.uku-bar-sep        { height: 20px !important; }
	/* Heart at 28px circle (was 32 at the 600px tier) */
	.uku-fav-wrap {
		width: 28px !important;
		min-width: 28px !important;
		max-width: 28px !important;
		flex: 0 0 28px;
	}
	.uku-fav-wrap .wpfp-link,
	.uku-fav-wrap .wpfp-span,
	.uku-fav-wrap .wpfp-span a,
	.uku-fav-pill {
		width: 28px !important;
		min-width: 28px !important;
		max-width: 28px !important;
		height: 28px !important;
		border-radius: 14px !important;
	}
	/* Meta strip: hide LEFTY toggle here so the star rating fits.
	   Lefty stays available in the gear popover. */
	.uku-songmeta-lh-wrap { display: none !important; }
}

@media (max-width: 540px) {

	.cits-c-b {
		padding: 2px;
	}

	.cits-c {
		width: 80px;
		height: auto;
		padding: 9px 8px 1px 0px;
	}
	.uku-chord-svg { height: 118px; }

	.shorttitle {
		display: none !important
	}

	.fulltitle {
		display: block !important
	}

	#sliderAmount_trans {
		display: inline-block !important;
	}
}

@media (max-width: 410px) {
	.cits-c {
		width: 75px;
		height: auto;
	}

	.cits-c-b {
		margin: 2px;
	}
	.uku-chord-svg { height: 110px; }
}

@media (max-width: 339px) {

	#transposerbox,
	#textsizebox,
	#lineheightbox,
	#colorchooserbox {
		width: 100% !important;
		display: block !important;
	}

	#transposerbox .vc_column-inner,
	#textsizebox .vc_column-inner {
		padding-right: 15px !important;
		padding-left: 15px !important
	}

	#lineheightbox .vc_column-inner,
	#colorchooserbox .vc_column-inner {
		padding-right: 15px !important;
		padding-left: 15px !important
	}

	.mobilecolorcontrols {
		position: relative;
		width: 100%;
		margin: 0;
		padding: 0;
	}

	#colorchooserlabel {
		position: relative;
		margin: -43px 0 0 0 !important;
	}
}

/* slider in de ukutabs tools */
input[type=range] {
	-webkit-appearance: none;
	margin: 0;
	width: 100%;
	border: none;
	padding: 7px 0 0 0;
}

input[type=range]:focus {
	outline: none;
}

input[type=range]::-webkit-slider-runnable-track {
	width: 100%;
	height: 20px;
	cursor: pointer;
	-webkit-border-radius: 4px;
	-moz-border-radius: 4px;
	border-radius: 4px;
	background: #e6e7dc;
	background: -webkit-linear-gradient(left, #c5c4ba, #908f85);
	background: -moz-linear-gradient(left, #c5c4ba, #908f85);
	background: -ms-linear-gradient(left, #c5c4ba, #908f85);
	background: -o-linear-gradient(left, #c5c4ba, #908f85);
	background: linear-gradient(to right, #c5c4ba, #908f85);
}

input[type=range]::-webkit-slider-thumb {
	background: var(--chordcolor);
	-webkit-box-shadow: 0 0 10px rgba(0, 0, 0, .3);
	-moz-box-shadow: 0 0 10px rgba(0, 0, 0, .3);
	box-shadow: 0 0 10px rgba(0, 0, 0, .3);
	-moz-border-radius: 3px;
	-webkit-border-radius: 3px;
	border-radius: 3px;
	border: none;
	height: 32px;
	width: 16px;
	cursor: pointer;
	-webkit-appearance: none;
	margin-top: -6px
}

input[type=range]::-moz-range-track {
	width: 100%;
	height: 20px;
	cursor: pointer;
	-webkit-border-radius: 4px;
	-moz-border-radius: 4px;
	border-radius: 4px;
	background: #cdccc1;
}

input[type=range]::-moz-range-thumb {
	background: var(--chordcolor);
	-webkit-box-shadow: 0 0 10px rgba(0, 0, 0, .3);
	-moz-box-shadow: 0 0 10px rgba(0, 0, 0, .3);
	box-shadow: 0 0 10px rgba(0, 0, 0, .3);
	-moz-border-radius: 3px;
	-webkit-border-radius: 3px;
	border-radius: 3px;
	border: none;
	height: 32px;
	width: 16px;
	cursor: pointer;
	-webkit-appearance: none;
	margin-top: -5px
}

input[type=range]::-ms-track {
	width: 100%;
	height: 20px;
	cursor: pointer;
	-webkit-border-radius: 4px;
	-moz-border-radius: 4px;
	border-radius: 4px;
	background: #cdccc1;
}

input[type=range]::-ms-fill-lower {
	background: #2a6495;
	border: 0.2px solid #010101;
	border-radius: 2.6px;
	box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
}

input[type=range]::-ms-fill-upper {
	background: #3071a9;
	border: 0.2px solid #010101;
	border-radius: 2.6px;
	box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
}

input[type=range]::-ms-thumb {
	background: var(--chordcolor);
	-webkit-box-shadow: 0 0 10px rgba(0, 0, 0, .3);
	-moz-box-shadow: 0 0 10px rgba(0, 0, 0, .3);
	box-shadow: 0 0 10px rgba(0, 0, 0, .3);
	-moz-border-radius: 3px;
	-webkit-border-radius: 3px;
	border-radius: 3px;
	border: none;
	height: 32px;
	width: 16px;
	cursor: pointer;
	-webkit-appearance: none;
	margin-top: -5px
}

input[type=range]:focus::-ms-fill-lower {
	background: #3071a9;
}

input[type=range]:focus::-ms-fill-upper {
	background: #367ebd;
}

/* ── Related songs block (audit SEO-04, 2026-06-11) ──────────────────
   Lists reuse the global .uku-songlist row styles and the brown
   .uku-list-header band; only spacing is added here. */
.uku-related { margin: 28px 0 6px; }
.uku-related .uku-list-header { margin-top: 20px; }
.uku-related__list { margin-bottom: 4px; }