/*********** NEVER USE filter: !!! GIVES RANDOM ARTIFACTS ALL OVER THE PLACE **************/

@font-face {
	font-family: 'Open Sans Condensed';
	src: url('../XUI/assets/OpenSans_Condensed-Regular.ttf');
}
@font-face {
	font-family: 'Open Sans Condensed';
	font-weight: bold;
	src: url('../XUI/assets/OpenSans_Condensed-Bold.ttf');
}
@font-face {
	font-family: 'Open Sans Condensed';
	font-style: italic;
	src: url('../XUI/assets/OpenSans_Condensed-Italic.ttf');
}
@font-face {
	font-family: 'Open Sans Condensed';
	font-weight: bold;
	font-style: italic;
	src: url('../XUI/assets/OpenSans_Condensed-BoldItalic.ttf');
}

html, body {
	background: #1a1a1a;
}

/*

	--app-height is the real, currently visible viewport height, published by
	App.updateAppHeight(). It replaces 100vh throughout the app.

	Viewport units are not usable here: iOS Safari's `vh` is the LARGE viewport
	(as if the browser chrome were retracted), so a 100vh layout is taller than
	what you can see and the bottom toolbar is cut off in a tab. `svh`/`dvh` are
	not a fix either -- WebKit has shipped them with different bugs in tab and in
	home-screen/standalone mode, so getting one right breaks the other.

	The 100vh below is the fallback and is deliberately today's exact behaviour:
	if the JS never runs, nothing changes.

*/

:root {
	--app-height: 100vh;
}

html {
	font-size: min(139%, 2.3vw);
	cursor: default;
}

/*

	iOS fires its selection / "Copy | Look Up | Translate" callout on a
	tap-and-hold, which collides with every tap-and-hold gesture the app has
	(marquee select, and so on). Suppressed app-wide and restored only where
	text really is edited or selected.

	Declared with `*` for the same reason as touch-action above: WebKit decides
	the callout from the TAP TARGET's own computed value, so a rule on body does
	not reach it even though the property is nominally inherited. `*` has zero
	specificity, so the text-entry exceptions below still win.

*/

* {
	-webkit-touch-callout: none;
	-webkit-user-select: none;
	user-select: none;
}

input,
textarea,
[contenteditable] {
	-webkit-touch-callout: default;
	-webkit-user-select: text;
	user-select: text;
}

p {
	line-height: 1.25;
	margin: 1em 0;
}

.screen, .ui, .ui button {
	font-family: "Open Sans Condensed", sans-serif;
}

.screen {
	position: absolute;
	top: 2rem;
	left: 0;
	width: 100%;
	height: calc(var(--app-height) - 2rem);
	z-index: 20;
	display: none;
}
body.audio #keys,
body.audio #arranger,
body.audio #pianoroll
{
	width: calc(100% - 6rem - 1px); /* App.config.channelWidth */
	overflow: visible;
}

#transport-container {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
}


.crosshair {
	position: fixed;
	display: none;
}
.crosshair.show {
	display: block;
}

.crosshair > div {
	position: fixed;
	background: rgba(255, 255, 255, 0.6);
}

.crosshair > div.horizontal {
	left: 0;
	width: 100%;
	height: 0.5px;
}
.crosshair > div.vertical {
	top: 0;
	height: calc(var(--app-height) - 2rem);
	width: 0.5px;
}

.marquee {
	position: fixed;
	background: rgba(255, 255, 255, 0.15);
	display: none;
}
.marquee.show {
	display: block;
}

.marquee-start {
	border: solid 0.5px #fff;
	width: 90px;
	height: 90px;
	animation: marquee-start 0.35s;
}

@keyframes marquee-start {
	from {
		transform: translate3d(-50%, -50%, 0) scale3d(0.7, 0.7, 1);
		opacity: 0;
	}
	70% {
		transform: translate3d(-50%, -50%, 0) scale3d(1, 1, 1);
		opacity: 1;
	}
	to {
		transform: translate3d(-50%, -50%, 0) scale3d(0.3, 0.3, 1);
		opacity: 0;
	}
}

.selection-horizontal, .selection-vertical {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: rgba(255, 255, 255, 0.1);
	pointer-events: none;
	display: none;
	transform: translate3d(0, 0, 0);
}
.selection-horizontal.active, .selection-vertical.active {
	background: rgba(255, 255, 255, 0.2);
}

.handle {
	position: fixed;
	display: none;
	color: #fff;
	position: absolute;
	background: #444;
	box-shadow: inset 0 0 10px 0 rgba(0, 0, 0, 0.3);
	border: solid 1px #000;
	overflow: hidden;
	white-space: nowrap;
	transition: transform 0.15s, right 0.15s;
	text-align: center;
}
.handle.show {
	transform: none;
}
.handle.active {
	background: #fff;
	color: #000;
}
.handle abbr {
	font-size: 1rem;
}
.handle > abbr.ios-timer-outline {
	display: none;
}

.handle button.toggle {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	display: none;
}
.handle.timestretch button.toggle {
	display: block;
}

.handle.timestretch-only abbr.android-arrow-dropleft,
.handle.timestretch-only abbr.android-arrow-dropright
{
	display: none;
}
.handle.timestretch-only abbr.ios-timer-outline { display: inline-block; }

.handle-horizontal, .handle-length, .handle-start {
	bottom: 2rem;
	height: 2.2rem;
	line-height: 2rem;
	transform: translate3d(0, 100%, 0);
}
.handle-horizontal {
	left: calc(50% - 3rem);
	width: 6rem;
	transform: translate3d(0, 100%, 0);
}

.handle-horizontal.lonely {
	width: 3rem;
	left: calc(50% - 1.5rem);
	text-indent: 0;
	border-top-right-radius: 1rem;
	border-top-left-radius: 1rem;
}
.handle-length {
	left: calc(50% + 3rem);
	width: 2.5rem;
	border-top-right-radius: 1rem;
}
.handle-start {
	right: calc(50% + 3rem - 1px);
	width: 2.5rem;
	border-top-left-radius: 1rem;
}

.handle-vertical, .handle-velocity, .handle-scale-up, .handle-scale-down {
	right: -1px;
	height: 3rem;
	width: 1.9rem;
	transform: translate3d(100%, 0, 0);
}
.handle-vertical.lonely, .handle-velocity {
	border-top-left-radius: 1rem;
	border-bottom-left-radius: 1rem;
}
.handle-vertical {
	top: calc(50% - 1.5rem - 1rem);
}
.handle-velocity {
	top: calc(50% + 1.5rem);
}
.handle-scale-up, .handle-scale-down {
	height: 2.5rem;
	line-height: 2.5rem;
}
.handle-scale-up {
	border-top-left-radius: 1rem;
	top: calc(50% - 1.5rem - 1rem - 2.5rem);
}
.handle-scale-down {
	border-bottom-left-radius: 1rem;
	top: calc(50% - 1.5rem - 1rem + 3rem);
}

.handle-vertical > div, .handle-velocity > div {
	position: absolute;
	top: calc(50% - 0.5em);
	right: 0;
	width: 100%;
}
.handle-vertical > div {
	top: calc(50% - 0.4em);
}
.handle-velocity > div {
	top: calc(50% - 0.7em);
}

.handle-vertical abbr {
	display: block;
	line-height: 0.45em;
}

.handle abbr, .handle-vertical > div, .handle-velocity > div {
	pointer-events: none;
}

.button-grid {
	font-size: 0;
	text-align: center;
	margin-bottom: 1.25rem;
}

.ui .button-grid > button, .ui .button-grid > div.radio, .ui .button-grid > slider, .ui .button-grid > div.label.inline {
	margin: 0.25rem;
}

.ui-busy-overlay {
	background-color: rgba(10, 10, 10, 0.9);
}
.ui-busy-overlay > div > div {
	background-color: #fff;
}

#notify {
	position: fixed;
	z-index: 1000;
	top: 50%;
	left: 50%;
	width: 90%;
	font-size: 2.3rem;
	color: #fff;
	text-shadow: 0 0 0.9rem #000, 0 0 2.5rem #000;
	opacity: 0;
	transform: translate3d(-50%, -50%, 0);
	line-height: 1.1;
	text-align: center;
	pointer-events: none;
}
#notify.show {
	opacity: 1;
}

#notify div.ui {
	pointer-events: auto;
	margin-top: 0.5rem;
}

button.mute,
button.solo
{
	font-family: monospace;
	font-size: 0.55rem;
}
/*

	Browser gesture suppression (web build)

	`touch-action` is decided BEFORE a gesture starts, which is why
	preventDefault() alone is not enough: once the browser has begun a page
	zoom, later preventDefault() calls are ignored (the touchmove event is
	delivered with cancelable: false).

	The baseline below is deny-by-default for ZOOM only: `pan-x pan-y` is
	`auto` minus pinch-zoom and minus double-tap-zoom, so panning in both
	directions is untouched. The natively scrolling surfaces (.audio-modules,
	ul.files, .ui menu / UI.alert, .tab-content, .channel-inserts,
	#mixer-channels, the popups, the XUI menus and tabs) keep scrolling and
	rubber-banding exactly as before, and need no exceptions here.

	It is applied with `*` and not just on body ON PURPOSE. Blink intersects
	touch-action up the ancestor chain, so body alone would be enough there --
	but WebKit/iOS only consults the TAP TARGET when deciding whether
	double-tap-to-zoom is allowed, so on iOS (verified on 16.7 and 18.2) a
	body-only rule stops pinch-zoom and lets double-tap-zoom straight through.
	Every element has to carry the declaration itself. touch-action is not an
	inherited property, so `*` is not a cascade hazard: it is exactly the same
	as writing the declaration on each element. `*` also has zero specificity,
	so the explicit rules below still win.

	The explicit `none` list that follows is for the surfaces that implement
	their OWN scrolling and pinch-zoom: there the browser must not claim any
	panning either. `none` intersected with the baseline is still `none`.

	THE `none` LIST IS MIRRORED IN App.config.gestureOwnedSelector, which uses
	it to suppress the iOS long-press callout. Change one, change the other.

	App.preventBrowserZoom() additionally cancels Safari's non-standard
	gesturestart/change/end and ctrl+wheel, as a backstop for cases where
	touch-action is not honoured.

*/

*,
html,
body {
	touch-action: pan-x pan-y;
}

#arranger-editor,
#pianoroll-editor,
#ruler-ruler,
.keys-keys,
.keys-velocity,
#keys-drums,
body.audio #mixer-channels,
#arranger-split-pos,
#arranger-handle-horizontal,
#arranger-handle-vertical,
#arranger-handle-start,
#arranger-handle-length,
#pianoroll-handle-horizontal,
#pianoroll-handle-vertical,
#pianoroll-handle-start,
#pianoroll-handle-length,
#pianoroll-handle-scale-up,
#pianoroll-handle-scale-down,
#pianoroll-handle-velocity,
#loop-handle-start,
#loop-handle-end {
	touch-action: none;
}