/*
 * Groove Scribe 3.0 — refined dark-orange theme.
 * Presentation-only overrides for the teaching fork. The score is treated as
 * a warm sheet above a darker input console; playback, notation and URLs are
 * unchanged. The earlier experimental theme remains available for comparison.
 */

:root {
	--gs-shell: #12110f;
	--gs-shell-warm: #17130f;
	--gs-panel: #191713;
	--gs-panel-raised: #211e19;
	--gs-panel-hover: #2a2620;
	--gs-border: #34302a;
	--gs-border-strong: #4a443b;
	--gs-score: #c9c1b4;
	--gs-score-ink: #26231f;
	--gs-editor: #2b2925;
	--gs-editor-raised: #302e29;
	--gs-editor-line: #49453f;
	--gs-note: #d6d0c5;
	--gs-note-muted: #5d5851;
	--gs-text: #e5dfd5;
	--gs-text-muted: #918b82;
	--gs-orange: #ff7a18;
	--gs-orange-soft: #ff9a47;
	--gs-green: #69e58c;

	--header-bg-color: var(--gs-panel);
	--header-bg-start-color: #171512;
	--header-bg-end-color: #291a11;
	--bpm-bg-color: #151411;
	--side-bg-color: var(--gs-shell);
	--bottom-bg-color: var(--gs-panel);
	--side-highlight-bg-color: rgba(255, 122, 24, 0.1);
	--note-overlay-bg-color: rgba(255, 122, 24, 0.13);
	--highlight-color: var(--gs-orange);
	--highlight-color-on-white: #c95400;
}

html {
	background: var(--gs-shell);
}

body,
#GrooveWriter {
	background:
		radial-gradient(circle at 90% -10%, rgba(104, 55, 24, 0.2), transparent 34rem),
		linear-gradient(180deg, var(--gs-shell-warm), var(--gs-shell) 18rem);
	color: var(--gs-text);
	font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

#GrooveWriter,
#RightHandContent {
	background-color: var(--gs-shell);
}

#RightHandContent {
	box-sizing: border-box;
	padding-bottom: 112px;
	scrollbar-color: var(--gs-border-strong) var(--gs-shell);
}

#TopNav,
#midiPlayer {
	max-width: none;
}

#TopNav {
	background: linear-gradient(100deg, var(--header-bg-start-color), var(--header-bg-end-color));
	border-bottom: 1px solid var(--gs-border);
	box-shadow: 0 12px 34px rgba(0, 0, 0, 0.2);
}

#LeftHandNav {
	background: rgba(18, 17, 15, 0.985);
	border-right: 1px solid var(--gs-border);
	box-shadow: 10px 0 28px rgba(0, 0, 0, 0.16);
}

#midiPlayer,
.playerControl {
	background: #151411;
	border-color: var(--gs-border);
}

#midiPlayer {
	border-bottom: 1px solid var(--gs-border);
}

#logoInSubdivision {
	background: linear-gradient(145deg, #ff8c31, var(--gs-orange));
}

#logoTextUpperLeft {
	border-right: 1px solid rgba(255, 255, 255, 0.07);
}

#forkVersionMark {
	color: var(--gs-orange);
	text-shadow: 0 0 16px rgba(255, 122, 24, 0.22);
}

#metronomeLabel,
.bottomButtonLabel,
#timeSubLabel {
	font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
	font-size: 9px;
	font-weight: 700;
	letter-spacing: 0.15em;
	text-transform: uppercase;
}

#metronomeLabel,
.tempoLabel,
.swingLabel,
.swingOutput,
.MIDIPlayTime,
.left-button,
#bottomButtonRow {
	color: var(--gs-text-muted);
}

#timeSigLabel,
#timeSubLabel {
	color: var(--gs-green);
}

.metronomeButton,
.rightButtons {
	border: 1px solid transparent;
	border-radius: 7px;
	box-sizing: border-box;
	color: #c4beb4;
	font-size: 12px;
	padding: 2px 7px;
}

.metronomeButton:hover,
.rightButtons:hover,
.metronomeButton.selected:hover,
.rightButtons.selected:hover,
.rightButtons.buttonSelected:hover {
	background: rgba(255, 122, 24, 0.07);
	border-color: rgba(255, 122, 24, 0.28);
	color: var(--gs-orange-soft);
	font-weight: 500;
	transform: none;
}

.metronomeButton.buttonSelected,
.metronomeButton.selected,
.rightButtons.buttonSelected {
	background: rgba(255, 122, 24, 0.09);
	border-color: rgba(255, 122, 24, 0.38);
	color: var(--gs-orange-soft);
}

/* Match Permutations to the other right-side menu tabs. The original theme
   styles this anchor with a higher-specificity ID rule. */
#permutationAnchor.enabled {
	color: #c4beb4;
}

#permutationAnchor.enabled:hover,
#permutationAnchor.enabled.buttonSelected {
	color: var(--gs-orange-soft);
}

.left-button-content {
	border-bottom: 1px solid var(--gs-border);
	letter-spacing: 0.01em;
}

.left-button.buttonSelected,
.left-button.buttonSelected:hover,
#advancedEditAnchor.buttonSelected {
	background: rgba(255, 122, 24, 0.09);
	box-shadow: inset 4px 0 0 var(--gs-orange);
	color: var(--gs-text);
	transform: none;
}

.left-button.disabled,
.left-button.disabled:hover {
	background: var(--gs-shell);
	color: #48443e;
}

.myButton:hover,
.left-button:hover {
	background: var(--gs-panel-hover);
	border-top-color: transparent;
	color: var(--gs-text);
	transform: none;
}

.midiPlayImage,
.midiRepeatImage {
	background: var(--gs-panel-raised);
	border: 1px solid var(--gs-border-strong);
	color: var(--gs-text-muted);
	transition: background 120ms ease, border-color 120ms ease, color 120ms ease;
}

.midiPlayImage:hover,
.midiRepeatImage:hover {
	background: rgba(255, 122, 24, 0.09);
	border-color: rgba(255, 122, 24, 0.5);
}

.midiPlayImage.Stopped:before,
.midiPlayImage.Paused:before,
.midiPlayImage.Playing:before,
.midiExpandImage.small:hover,
.midiExpandImage.large:hover {
	color: var(--gs-orange);
}

.tempoTextField {
	background: transparent;
	color: var(--gs-text);
	font-variant-numeric: tabular-nums;
}

input[type="range"] {
	background: var(--gs-border-strong);
}

input[type="range"]::-webkit-slider-runnable-track {
	background: #3e3b37;
}

input[type="range"]::-webkit-slider-thumb {
	background: var(--gs-orange);
	border-color: #863800;
	box-shadow: 0 0 0 3px rgba(255, 122, 24, 0.11);
}

input[type="range"]::-moz-range-track {
	background: #3e3b37;
}

input[type="range"]::-moz-range-thumb {
	background: var(--gs-orange);
	border-color: #863800;
}

/* Score output: a deliberately subdued sheet, rather than white or inverted. */
#sheetMusicDiv {
	background: var(--gs-score);
	border: 1px solid #5a544b;
	border-bottom: 0;
	border-radius: 12px 12px 0 0;
	box-shadow: 0 18px 44px rgba(0, 0, 0, 0.17);
	box-sizing: border-box;
	margin: 16px 16px 0;
	max-width: calc(100% - 32px);
	overflow: hidden;
	width: calc(100% - 32px);
}

#sheetMusicDiv .svgTarget,
#sheetMusicDiv .svgTarget svg {
	background: var(--gs-score);
}

#sheetMusicDiv .svgTarget svg {
	color: var(--gs-score-ink);
	filter: none;
	opacity: 0.88;
}

/* abc2svg masks the bracket behind its numeral with a white rectangle. */
@media screen {
	#sheetMusicDiv .svgTarget svg rect[fill="white"] {
		fill: var(--gs-score);
	}
}

#RightHandContent .svgTarget svg {
	margin-left: 4%;
	margin-right: 4%;
	width: 92%;
}

.abcr.highlighted {
	fill: var(--gs-orange) !important;
	fill-opacity: 0.15;
}

#sheetMusicTextFields {
	background: var(--gs-panel);
	border: 1px solid var(--gs-border-strong);
	border-radius: 0 0 12px 12px;
	box-sizing: border-box;
	color: #b7b0a6;
	font-size: 13px;
	margin: 0 16px 16px;
	max-width: calc(100% - 32px);
	padding: 9px 12px;
	width: calc(100% - 32px);
}

.sheetMusicTextField {
	align-items: center;
	display: flex;
	gap: 7px;
	margin: 0 8px;
}

.sheetMusicInputField,
textarea,
select,
input[type="text"],
input[type="number"] {
	background: #12110f;
	border: 1px solid var(--gs-border-strong);
	border-radius: 6px;
	color: var(--gs-text);
	font: inherit;
	outline: none;
}

.sheetMusicInputField:focus,
textarea:focus,
select:focus,
input[type="text"]:focus,
input[type="number"]:focus {
	border-color: var(--gs-orange);
	box-shadow: 0 0 0 3px rgba(255, 122, 24, 0.09);
}

/* Editor input: lower-luminance console with quieter guides. */
#musicalInput {
	background: var(--gs-editor);
	border: 1px solid var(--gs-border-strong);
	border-radius: 12px;
	box-shadow: 0 16px 38px rgba(0, 0, 0, 0.14);
	box-sizing: border-box;
	color: #aaa49a;
	margin: 0 16px 16px;
	max-width: calc(100% - 32px);
	overflow-x: auto;
	padding: 20px 10px 22px;
	width: calc(100% - 32px);
}

.staff-container {
	background: var(--gs-editor);
}

.line-labels {
	box-sizing: border-box;
	color: #aaa49a;
	font-size: 16px;
	font-weight: 500;
	width: 78px;
}

.hh-label,
.tom-label,
.snare-label,
.kick-label {
	color: #aaa49a;
	margin-left: 0;
	padding-right: 10px;
	text-align: right;
}

.stickings-label,
.stickings-container {
	background: #34312c;
	color: #aaa49a;
}

.staff-line-1,
.staff-line-2,
.staff-line-3,
.staff-line-4,
.staff-line-5 {
	border-top-color: var(--gs-editor-line);
	border-top-width: 1px;
}

.tom_circle,
.snare_circle,
.kick_circle {
	background: var(--gs-editor-raised);
	border-color: var(--gs-note-muted);
}

.sticking_right,
.sticking_left,
.hh_cross {
	color: var(--gs-note-muted);
}

.bg-highlight:hover {
	background: rgba(255, 122, 24, 0.045);
}

.hh-label:hover,
.tom-label:hover,
.snare-label:hover,
.kick-label:hover,
.stickings-label:hover,
#addMeasureButton,
.closeMeasureButton {
	color: var(--gs-orange-soft);
}

#PermutationOptions.displayed,
#GrooveDB_MetaData,
#debugDisplayArea {
	background: var(--gs-panel);
	border-color: var(--gs-border);
	color: var(--gs-text-muted);
}

/* Compact persistent action dock: quiet by default, Share as primary. */
#bottomButtonRow {
	background: rgba(25, 23, 19, 0.965);
	border: 1px solid var(--gs-border-strong);
	border-radius: 12px;
	bottom: 16px;
	box-shadow: 0 18px 50px rgba(0, 0, 0, 0.34);
	box-sizing: border-box;
	left: 88px;
	max-width: none;
	padding: 9px 12px;
	position: fixed;
	right: 16px;
	width: auto;
	z-index: 997;
}

.pageBottomButton {
	border: 1px solid transparent;
	border-radius: 8px;
	color: var(--gs-text-muted);
	margin: 0 4px;
	min-width: 74px;
	padding: 6px 10px;
	transition: background 120ms ease, border-color 120ms ease, color 120ms ease;
}

.bottomButtonIcon {
	color: var(--gs-text-muted);
}

.bottomButtonIcon .fa-2x,
#stickingsButton:before,
#stickingsButton.ClickToHide:before {
	font-size: 1.35em;
	line-height: 24px;
}

.pageBottomButton:hover {
	background: rgba(255, 122, 24, 0.07);
	border-color: rgba(255, 122, 24, 0.27);
	color: var(--gs-orange-soft);
}

.pageBottomButton:hover .bottomButtonIcon {
	color: var(--gs-orange-soft);
}

#shareSaveButton {
	background: rgba(255, 122, 24, 0.09);
	border-color: rgba(255, 122, 24, 0.32);
	color: var(--gs-orange-soft);
}

#shareSaveButton .bottomButtonIcon {
	color: var(--gs-orange);
}

.noteContextMenu > ul.list,
#grooveListWrapper,
.grooveListUL {
	background: var(--gs-panel-raised);
	border-color: var(--gs-border-strong);
	color: var(--gs-text);
	box-shadow: 0 22px 60px rgba(0, 0, 0, 0.4);
}

.noteContextMenu > ul.list li,
.grooveListLI {
	border-bottom-color: var(--gs-border);
}

.noteContextMenu > ul.list li:hover,
ul.list a:hover,
.grooveListLI:hover {
	background: rgba(255, 122, 24, 0.09);
	color: var(--gs-orange-soft);
}

.grooveListHeaderLI {
	background: var(--gs-orange);
	color: #1a110a;
}

#fullURLPopup,
#metronomeAutoSpeedupConfiguration,
#timeSigPopup {
	background: var(--gs-panel-raised);
	border: 1px solid var(--gs-border-strong);
	border-radius: 11px;
	box-shadow: 0 24px 70px rgba(0, 0, 0, 0.48);
	color: var(--gs-text);
}

#fullURLPopupTextField {
	background: #2d2017;
	color: var(--gs-text);
}

#timeSigPopupTimeSigTop,
#timeSigPopupTimeSigBottom {
	background: var(--gs-shell);
	color: var(--gs-text);
}

#timeSigPopupCancel {
	background: transparent;
	border: 1px solid var(--gs-border-strong);
	color: var(--gs-text-muted);
}

#timeSigPopupOK,
#metronomeAutoSpeedupConfigurationCloseButton,
.sharer-0 label {
	background: var(--gs-orange) !important;
	color: #1a110a !important;
}

#totalPlayTime,
#fullURLPopupSubTitle,
#metronomeAutoSpeedupTempoIncreaseAmountOutput,
#metronomeAutoSpeedupTempoIncreaseIntervalOutput,
#metronomeAutoSpeedupConfigurationKeepIncreasing {
	color: var(--gs-green);
}

* {
	scrollbar-width: thin;
	scrollbar-color: var(--gs-border-strong) var(--gs-shell);
}

*::-webkit-scrollbar {
	height: 9px;
	width: 9px;
}

*::-webkit-scrollbar-track {
	background: var(--gs-shell);
}

*::-webkit-scrollbar-thumb {
	background: var(--gs-border-strong);
	border: 2px solid var(--gs-shell);
	border-radius: 9px;
}

@media screen and (pointer: coarse) and (max-width: 1100px), screen and (max-width: 760px) {
	#sheetMusicDiv,
	#sheetMusicTextFields,
	#musicalInput {
		margin-left: 8px;
		margin-right: 8px;
		max-width: calc(100% - 16px);
		width: calc(100% - 16px);
	}

	#sheetMusicTextFields {
		flex-wrap: wrap;
		gap: 7px;
	}

	#RightHandContent {
		padding-bottom: 98px;
	}

	#bottomButtonRow {
		bottom: 8px;
		justify-content: flex-start;
		left: 64px;
		overflow-x: auto;
		right: 8px;
	}

	.pageBottomButton {
		flex: 0 0 auto;
		min-width: 62px;
		padding-left: 7px;
		padding-right: 7px;
	}

	.line-labels {
		font-size: 14px;
		width: 70px;
	}
}

/*
 * Layout fidelity reset
 *
 * Groove Scribe's labels and note rows share tightly coupled dimensions.
 * Preserve the fork's original geometry and use this theme for colour,
 * contrast and interaction styling only.
 */
#RightHandContent {
	padding-bottom: 0;
}

#TopNav,
#midiPlayer {
	max-width: 1478px;
}

#sheetMusicDiv {
	border: 0;
	border-radius: 0;
	box-shadow: none;
	box-sizing: content-box;
	margin: 0;
	max-width: 1478px;
	overflow: visible;
	width: auto;
}

#RightHandContent .svgTarget svg {
	margin-left: 5%;
	margin-right: 5%;
	width: 90%;
}

#sheetMusicTextFields {
	border: 0;
	border-radius: 0;
	border-top: 1px solid var(--gs-border-strong);
	box-sizing: content-box;
	flex-wrap: nowrap;
	font-size: inherit;
	gap: 0;
	justify-content: space-around;
	margin: 0;
	max-width: 1478px;
	padding: 8px 0;
	width: auto;
}

.sheetMusicTextField {
	display: inline;
	gap: 0;
	margin: 0 10px;
}

#musicalInput {
	border: 0;
	border-bottom: 1px solid var(--gs-border-strong);
	border-radius: 0;
	box-shadow: none;
	box-sizing: content-box;
	margin: 0;
	max-width: 1478px;
	padding: 0;
	width: 100%;
}

.line-labels {
	font-size: 20px;
	font-weight: 400;
	width: 80px;
}

.hh-label {
	margin-left: 8px;
	margin-top: 16px;
	padding-right: 0;
	text-align: center;
}

#tom1-label,
#tom2-label,
#tom4-label,
.snare-label,
.kick-label {
	margin-left: 8px;
	margin-top: 5px;
	padding-right: 0;
	text-align: center;
}

.staff-line-1,
.staff-line-2,
.staff-line-3,
.staff-line-4,
.staff-line-5 {
	border-top-width: 3px;
}

/* Match the editor's fixed 44px hi-hat / 30px drum rows. Font-dependent
   normal line heights plus margins used to accumulate drift down the labels. */
.notes-row-container > .line-labels > div {
	box-sizing: border-box;
	height: 30px;
	line-height: 30px;
	margin-top: 0;
}

.notes-row-container > .line-labels > .hh-label {
	height: 44px;
	padding-top: 15px;
	line-height: 28px;
}

.notes-row-container > .line-labels > #tom1-label,
.notes-row-container > .line-labels > #tom2-label,
.notes-row-container > .line-labels > #tom4-label {
	margin-top: 0;
}

#bottomButtonRow {
	border: 0;
	border-radius: 0;
	bottom: auto;
	box-shadow: none;
	box-sizing: content-box;
	left: auto;
	max-width: 1478px;
	overflow: visible;
	padding: 20px 0;
	position: static;
	right: auto;
	width: auto;
}

.pageBottomButton {
	background: transparent;
	border-color: transparent;
	border-radius: 0;
	margin: 0 20px;
	min-width: 0;
	padding: 0;
}

.bottomButtonIcon .fa-2x,
#stickingsButton:before,
#stickingsButton.ClickToHide:before {
	font-size: 2em;
	line-height: 32px;
}

#shareSaveButton {
	background: transparent;
	border-color: transparent;
	color: var(--gs-orange-soft);
}

/*
 * Tuplets
 *
 * The selectors are a temporary editing layer, so revealing them must not
 * alter the established note-row geometry. Each control uses the same 35px
 * slot rhythm as the editor, plus the existing 20px gap between beats.
 */
.legacy-mixed-division {
	display: none !important;
}

#tupletsButton .tuplet-obelus {
	display: inline-block;
	fill: currentColor;
	height: 32px;
	vertical-align: top;
	width: 32px;
}

#tupletsButton.buttonSelected,
#tupletsButton.ClickToHide,
#tupletsButton[aria-pressed="true"] {
	background: rgba(255, 122, 24, 0.09);
	border-color: rgba(255, 122, 24, 0.38);
	color: var(--gs-orange-soft);
}

#tupletsButton.buttonSelected .bottomButtonIcon,
#tupletsButton.ClickToHide .bottomButtonIcon,
#tupletsButton[aria-pressed="true"] .bottomButtonIcon,
#tupletsButton.has-custom .bottomButtonIcon {
	color: var(--gs-orange);
}

#tupletsButton.has-custom .bottomButtonLabel::after {
	color: var(--gs-orange);
	content: " \2022";
}

#tupletsButton[aria-disabled="true"],
#tupletsButton.disabled {
	cursor: default;
	opacity: 0.42;
	pointer-events: none;
}

.tuplet-controls-row {
	color: var(--gs-text-muted);
	display: none;
	height: 54px;
	white-space: nowrap;
}

#musicalInput.tuplets-visible .tuplet-controls-row {
	display: table;
	width: 100%;
}

.tuplet-controls-row > .line-labels,
.tuplet-controls-row > .tuplet-controls-label {
	display: table-cell;
	vertical-align: middle;
	width: 80px;
}

.tuplet-controls-row .line-labels .tuplet-controls-label,
.tuplet-controls-row > .tuplet-controls-label {
	box-sizing: border-box;
	color: var(--gs-text-muted);
	font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
	font-size: 9px;
	font-weight: 700;
	letter-spacing: 0.13em;
	padding: 0 8px;
	text-align: center;
	text-transform: uppercase;
}

.tuplet-beat-controls,
.tuplet-controls-container {
	display: table-cell;
	font-size: 0;
	padding: 5px 0;
	text-align: left;
	vertical-align: middle;
	white-space: nowrap;
}

.tuplet-beat-controls::before,
.tuplet-controls-container::before {
	content: "";
	display: inline-block;
	width: 1px;
}

.tuplet-beat-control {
	align-items: center;
	box-sizing: border-box;
	display: inline-flex;
	flex-direction: column;
	height: 44px;
	justify-content: center;
	margin-right: 20px;
	position: relative;
	vertical-align: middle;
	width: calc(var(--tuplet-slots, 4) * 35px);
}

.tuplet-beat-control:last-child {
	margin-right: 0;
}

.tuplet-beat-number {
	color: #7f796f;
	font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
	font-size: 9px;
	font-weight: 700;
	letter-spacing: 0.1em;
	line-height: 11px;
	text-transform: uppercase;
}

.tuplet-select {
	-moz-appearance: none;
	-webkit-appearance: none;
	appearance: none;
	background-color: var(--gs-panel-raised);
	background-image:
		linear-gradient(45deg, transparent 50%, var(--gs-text-muted) 50%),
		linear-gradient(135deg, var(--gs-text-muted) 50%, transparent 50%);
	background-position:
		calc(100% - 10px) 13px,
		calc(100% - 6px) 13px;
	background-repeat: no-repeat;
	background-size: 4px 4px, 4px 4px;
	border: 1px solid var(--gs-border-strong);
	border-radius: 6px;
	box-sizing: border-box;
	color: var(--gs-text);
	cursor: pointer;
	font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
	font-size: 15px;
	font-variant-numeric: tabular-nums;
	font-weight: 700;
	height: 30px;
	line-height: 28px;
	min-width: 40px;
	padding: 0 18px 0 8px;
	text-align: center;
}

.tuplet-select:hover {
	background-color: var(--gs-panel-hover);
	border-color: rgba(255, 122, 24, 0.42);
}

.tuplet-select:focus-visible {
	border-color: var(--gs-orange);
	box-shadow: 0 0 0 3px rgba(255, 122, 24, 0.13);
	outline: none;
}

.tuplet-beat-control.is-custom .tuplet-beat-number,
.tuplet-beat-control.custom .tuplet-beat-number {
	color: var(--gs-orange-soft);
}

.tuplet-beat-control.is-custom .tuplet-select,
.tuplet-beat-control.custom .tuplet-select,
.tuplet-select.is-custom {
	background-color: #2d2017;
	border-color: rgba(255, 122, 24, 0.6);
	color: var(--gs-orange-soft);
}

.tuplet-ratio {
	background: var(--gs-orange);
	border-radius: 5px;
	color: #1a110a;
	font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
	font-size: 9px;
	font-weight: 800;
	line-height: 14px;
	padding: 0 4px;
	position: absolute;
	right: max(0px, calc(50% - 36px));
	top: 17px;
}

.tuplet-select:disabled {
	cursor: default;
	opacity: 0.45;
}

@media screen and (max-width: 760px) {
	.tuplet-controls-row .line-labels .tuplet-controls-label,
	.tuplet-controls-row > .tuplet-controls-label {
		letter-spacing: 0.08em;
		padding-left: 4px;
		padding-right: 4px;
	}
}

/* Phone-only action dock. vw sizing deliberately follows the existing scaled
   viewport: icons and touch targets remain readable without enlarging notes.
   Keep this AFTER the desktop layout reset above. */
@media screen {
	html.gs-phone-controls {
		--gs-dock-row: 14vw;
		--gs-dock-icon: 6vw;
		--gs-dock-label: 2.6vw;
		--gs-dock-height: calc(28vw + 2vw + env(safe-area-inset-bottom, 0px));
	}

	.gs-phone-controls #RightHandContent {
		padding-bottom: calc(var(--gs-dock-height) + 24px);
		scroll-padding-bottom: var(--gs-dock-height);
	}

	.gs-phone-controls #bottomButtonRow {
		position: fixed;
		left: 72px;
		right: 0;
		bottom: 0;
		width: auto;
		max-width: none;
		box-sizing: border-box;
		display: grid;
		grid-template-columns: repeat(4, minmax(0, 1fr));
		grid-auto-rows: var(--gs-dock-row);
		gap: 0;
		padding: 1vw 1vw calc(1vw + env(safe-area-inset-bottom, 0px));
		border-top: 1px solid var(--gs-border-strong);
		background: var(--gs-panel);
		box-shadow: 0 -8px 24px rgba(0, 0, 0, 0.2);
		overflow: visible;
		z-index: 997;
	}

	.gs-phone-controls #bottomButtonRow .pageBottomButton {
		box-sizing: border-box;
		margin: 0;
		min-width: 0;
		padding: 1.8vw 0 0;
		border-radius: 1.5vw;
		touch-action: manipulation;
	}

	.gs-phone-controls .pageBottomButton:focus-visible {
		outline: 2px solid var(--gs-orange);
		outline-offset: -2px;
	}

	.gs-phone-controls #bottomButtonRow .bottomButtonIcon,
	.gs-phone-controls #bottomButtonRow .bottomButtonIcon .fa-2x,
	.gs-phone-controls #stickingsButton::before {
		height: var(--gs-dock-icon);
		font-size: var(--gs-dock-icon);
		line-height: var(--gs-dock-icon);
	}

	.gs-phone-controls #tupletsButton .tuplet-obelus {
		width: var(--gs-dock-icon);
		height: var(--gs-dock-icon);
	}

	.gs-phone-controls #bottomButtonRow .bottomButtonLabel {
		font-size: var(--gs-dock-label);
		line-height: 1.5;
		letter-spacing: 0.06em;
		margin-top: 0.8vw;
		white-space: nowrap;
	}

	.gs-phone-controls #icon-tom1 { font-size: calc(var(--gs-dock-icon) * 0.5); margin-top: calc(var(--gs-dock-icon) * 0.5); }
	.gs-phone-controls #icon-tom2 { font-size: calc(var(--gs-dock-icon) * 0.44); margin-left: calc(var(--gs-dock-icon) * -0.16); }
	.gs-phone-controls #icon-tom3 { font-size: calc(var(--gs-dock-icon) * 0.63); margin-top: calc(var(--gs-dock-icon) * 0.34); }

	/* The bottom actions' popups must open above the dock, not off an edge. */
	.gs-phone-controls #stickingsContextMenu,
	.gs-phone-controls #downloadContextMenu {
		left: max(80px, 4vw) !important;
		right: 4vw;
		top: auto !important;
		bottom: calc(var(--gs-dock-height) + 2vw);
		width: auto !important;
		max-height: calc(100vh - var(--gs-dock-height) - 110px);
		overflow-y: auto;
		font-size: 3.5vw;
	}

	.gs-phone-controls #stickingsContextMenu li,
	.gs-phone-controls #downloadContextMenu li {
		padding: 3.5vw 3vw;
	}
}

@media screen and (orientation: landscape) {
	html.gs-phone-controls {
		--gs-dock-row: 7.5vw;
		--gs-dock-icon: 3vw;
		--gs-dock-label: 1.35vw;
		--gs-dock-height: calc(9.5vw + env(safe-area-inset-bottom, 0px));
	}
	.gs-phone-controls #bottomButtonRow { grid-template-columns: repeat(7, minmax(0, 1fr)); }
	.gs-phone-controls #bottomButtonRow .pageBottomButton { padding-top: 0.6vw; }
	.gs-phone-controls #stickingsContextMenu,
	.gs-phone-controls #downloadContextMenu { font-size: 2vw; }
	.gs-phone-controls #stickingsContextMenu li,
	.gs-phone-controls #downloadContextMenu li { padding: 1.4vw 3vw; }
}

@media print {
	body,
	#GrooveWriter,
	#RightHandContent,
	#sheetMusicDiv,
	.svgTarget {
		background: transparent;
		border: 0;
		box-shadow: none;
		color: #000;
		margin: 0;
		max-width: none;
		padding: 0;
		width: 100%;
	}

	#sheetMusicDiv .svgTarget svg {
		background: transparent;
		filter: none;
		opacity: 1;
	}
}

@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		scroll-behavior: auto !important;
		transition-duration: 0.01ms !important;
	}
}