/* Guitar tab player (alphaTab) */

/* The tab needs the full page width, so no sidebar on this page */
#narrative.tabPlayerPage { float: none; width: auto; padding-right: 1.9427402862985686%; }

/* Blog posts with a tab get the standard column width instead of the narrow blog one (narrower screens already widen it) */
@media screen and (min-width: 961px) {
	#blog #narrative.blogHasTab { width: 64.9%; }
}
#blog .tabPlayer { margin: 10px 0 25px; }
.tabPlayerField[hidden] { display: none!important; }

.tabPlayer { border: 1px solid #d5d9de; border-radius: 4px; background: #fff; margin-bottom: 20px; }

.tabPlayerControls { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; padding: 10px 12px; background: #f3f6f9; border-bottom: 1px solid #d5d9de; border-radius: 4px 4px 0 0; }
.tabPlayerControls button { margin: 0!important; min-width: 84px; width: auto!important; flex: 0 0 auto; }
.tabPlayerControls button:disabled { opacity: 0.4; cursor: default; }
#narrative .tabPlayerControls label { display: inline-flex; align-items: center; gap: 5px; padding: 0; font-size: 90%; white-space: nowrap; }
.tabPlayerControls select { padding: 4px 6px; font: inherit; max-width: 170px; }
.tabPlayerTime { font-variant-numeric: tabular-nums; font-size: 90%; color: #444; min-width: 96px; }

.tabPlayerStatus { padding: 6px 12px; font-size: 85%; color: #555; border-bottom: 1px solid #eceff2; }
.tabPlayerStatus:empty { display: none; }

.tabPlayerError { padding: 10px 12px; background: #fdecea; color: #8a1f17; border-bottom: 1px solid #f5c2bd; font-size: 90%; white-space: pre-wrap; }

/* Scrolls on its own so the controls stay in view while the cursor moves through the tab */
.tabPlayerViewport { position: relative; overflow: auto; max-height: 70vh; padding: 10px; }

.tabPlayerOpen { padding: 10px 12px; border-top: 1px solid #d5d9de; background: #f3f6f9; border-radius: 0 0 4px 4px; }
#narrative .tabPlayerOpen label { font-size: 90%; padding-top: 0; }

/* alphaTab playback cursor and highlighting */
.at-cursor-bar { background: rgba(255, 242, 0, 0.25); }
.at-cursor-beat { background: rgba(1, 109, 197, 0.75); width: 3px; }
.at-selection div { background: rgba(1, 109, 197, 0.12); }
.at-highlight * { fill: #016DC5; stroke: #016DC5; }

@media only screen and (max-width: 600px) {
	.tabPlayerControls { gap: 8px 10px; }
	.tabPlayerViewport { max-height: 60vh; padding: 4px; }
}