/*
This file is part of Vodka.

Vodka is free software: you can redistribute it and/or modify
it under the terms of the GNU General Public License as published by
the Free Software Foundation, either version 3 of the License, or
(at your option) any later version.

Vodka is distributed in the hope that it will be useful,
but WITHOUT ANY WARRANTY; without even the implied warranty of
MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
GNU General Public License for more details.

You should have received a copy of the GNU General Public License
along with Vodka.  If not, see <https://www.gnu.org/licenses/>.
*/

.draggablepanel {
	pointer-events: auto;
	position: absolute;
	left: 200px;
	top: 50px;
	width: 450px;
	cursor: grab;
}


#tutorialpanel {
	pointer-events: auto;
	position: absolute;
	left: 200px;
	top: 50px;
	width: 450px;
	cursor: grab;
}

/*
Fixed rather than absolute, so the panel stays where it is put however far down
the document you have scrolled. The button that summons it is already fixed, so
before this the two drifted apart: open the help after scrolling and the panel
was somewhere up the page, out of sight.

Held clear of the bottom of the window, and the panel inside it scrolls on its
own -- a hundred and twenty eight rows of note numbers should move inside the
panel rather than making the whole page taller.

(comment by Claude)
*/
#uberhelpcontainer {
    display: flex;
	flex-direction: column;
	position: fixed;
	top: var(--top-panel-h);
	left: 0;
	z-index: 1000;
	margin: 20px;
	max-height: calc(100vh - 40px - var(--top-panel-h));
	/* the container is only a frame; what is in it takes its own clicks, and
	   the document underneath keeps the rest */
	/* (comment by Claude) */
	pointer-events: none;
}

#uberhelpcontainer > * {
	pointer-events: auto;
}

.helpmenupanel {
	display: flex;
	flex-direction: row;
	font-family: Courier;
	font-size: 11px;
	padding: 0px;
	margin-bottom: 6px;
	margin-top: 6px;
}

.helpmenuitem {
	display: flex;
	background-color: var(--help-background);
	border: 2px solid var(--help-accent);
	padding: 6px;	
	margin: 0px;
	flex-grow: 1;
	cursor: pointer;
	text-align: center;
}

.infopanel {
	display: block;
	font-family: Courier;
	font-size: 11px;
	border: 1px solid var(--help-accent);
	background-color: var(--help-background);
	padding: 20px;
	/*
	Its own scrollbar, so a long panel scrolls inside the frame and the tabs
	above it stay put.

	A height of its own rather than shrinking to fit the container, because it
	is not a child of the container -- the preact root and the app's own wrapper
	sit in between, and flex shrinking does not reach through them. The number
	is the 20px the container is inset by, twice, plus the row of tabs above.

	(comment by Claude)
	*/
	overflow-y: auto;
	max-height: calc(100vh - 110px - var(--top-panel-h));
}

.infopanel .infotitle {
	padding: 0;
	margin: 0;
	font-size: 24px;
	margin-bottom: 18px;
}

.infopanel .infosubheader {
	padding: 0;
	margin: 0;
	margin-bottom: 12px;
	font-size: 12px;
}

.infopanel .infoheading {
	padding: 0;
	margin: 0;
	font-size: 16px;
	font-weight: bold;	
}


.infopanel .infoline {
	padding: 0;
	margin: 0;
	font-size: 10px;	
}

.infolineitalic {
	font-style: italic;
}

.infopanel .infospacer{
	padding: 0;
	margin: 0;
	font-size: 10px;	
	height: 12px;
}

.infopanel .infolinemargin {
	padding: 0;
	margin: 0;
	margin-top: 4px;
	margin-bottom: 4px;
	font-size: 10px;	
}

.infopanel .infoindent {
	padding-left: 16px;
}

.alwaysvisible {
	visibility: visible !important;
}

#tryset {
}

.trygroup {
	display:  none;	
}

.trygroup ul {
	padding-inline-start: 15px;
	list-style-type: square;
	margin-block-start: 0px;
	margin-block-end: 0px;
}

.trymore {
	margin-left: 15px;
	margin-top: 6px;
	margin-bottom: 6px;
	display: inline-block;
}

.infopanel .qmark {
	display: inline-block;
	font-size:29px;
	padding: 6px;
	margin: 0;
	font-family: Georgia;
	background-color: var(--help-surface);
	border: 1px solid var(--help-accent);
}

.infopanel .infohotkey {
	display: inline-block;
	font-size: 1.2em;
	font-weight: bold;
	margin-right: 5px;
	margin-top: 1px;
	margin-bottom: 1px;
	padding-left: 3px;
	padding-right: 3px;
	padding-bottom: 2px;
	background-color: var(--help-surface);
	border: 1px solid var(--help-accent);	
}

.infopanel .infohotkeylarge {
	font-size: 1.6em;
}

#infothingstotry {
	padding: 6px;
	background-color: var(--help-surface);
	border: 1px solid var(--help-accent);
}


.upperrightbutton {
/*	display: none;*/
position: fixed;
	cursor: pointer;
	top: var(--top-panel-h);
	right: 0px;
	margin-top: 3px;
	margin-right: 3px;
	font-family: Courier;
	font-size: 9px;
	border: 2px solid var(--help-accent);
	background-color: var(--help-background);
	padding: 3px 5px 5px 3px;
	z-index: 1001;
}


.helpbutton {
	padding: 2px 6px 2px 6px;
	background-color: var(--help-accent);
	color: var(--help-background);
	cursor: pointer;
}

/* Selected tab in the help top menu. Both .helpmenuitem and .helpbutton are on
   these elements and .helpbutton wins on background, so this has to come after
   it in the file to take effect. Selected reads as "continuous with the panel
   below it": panel-colored fill instead of the dark olive. */
/* (comment by Claude) */
.helpmenuitemselected {
	background-color: var(--help-background);
	color: var(--help-accent);
	font-weight: bold;
}

/* Section jump-links at the top of the full API reference. */
/* (comment by Claude) */
.infopanel .apinav {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	gap: 5px;
	margin-bottom: 18px;
	padding-bottom: 12px;
	border-bottom: 1px solid var(--help-accent);
}

.infopanel .apinavitem {
	display: inline-block;
	font-size: 1.1em;
	padding: 2px 5px 3px 5px;
	background-color: var(--help-surface);
	border: 1px solid var(--help-accent);
	cursor: pointer;
}

.infopanel .apinavitem:hover {
	background-color: var(--help-accent);
	color: var(--help-background);
}

.infopanel .apibacktotop {
	display: inline-block;
	font-size: 0.95em;
	padding: 1px 5px 2px 5px;
	margin-bottom: 4px;
	border: 1px solid var(--help-accent);
	background-color: var(--help-background);
	cursor: pointer;
}

.infopanel .apibacktotop:hover {
	background-color: var(--help-accent);
	color: var(--help-background);
}

.infopanel a {
	color: var(--help-link);
}

/*
The status bar is a row of islands, each its own small block in the help
button's colours, with the same 4px gap between them as between the bar and
the help button.

(comment by Claude)
*/
.statusnav {
	position: fixed;
	top: var(--top-panel-h);
	/* clear of the help button, plus a 4px gap -- measured, since the button's
	   width depends on its text */
	right: 42px;
	margin-top: 3px;
	margin-right: 3px;
	display: flex;
	flex-direction: row;
	align-items: center;
	gap: 4px;
	font-family: Courier;
	font-size: 9px;
	color: var(--help-background);
	z-index: 1001;
}

.statusnavitem {
	box-sizing: border-box;
	height: 18px;
	padding: 2px 6px 2px 6px;
	border: 2px solid var(--help-accent);
	background-color: var(--help-accent);
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
}

.stopbutton {
	color: var(--help-background);
}

/* reads as a label rather than something to press, unlike its neighbours */
.bpmreadout, .undoreadout, .cliplight {
	cursor: default;
}

.panelcaret {
	font-size: 15px;
	line-height: 1;
}

.cliplight {
	width: 18px;
	padding: 0;
	/* a 2px ring of whatever is behind the bar, red or not, so the light sits
	   a little inside its slot (comment by Claude) */
	border-color: transparent;
	background-clip: padding-box;
	/* the ring already looks like gap, so take it back out of the real gap
	   (comment by Claude) */
	margin: 0 -2px;
}

.cliplight.clipping {
	background-color: var(--clip-light);
}

.stopbutton svg {
	display: block;
}

.unsaveddot {
	width: 4px;
	height: 4px;
	border-radius: 50%;
	background-color: var(--help-background);
}


/* the Sessions tab */
/* (comment by Claude) */

.infopanel table.sessiontable {
	border-collapse: collapse;
	font-size: 10px;
}

.infopanel table.sessiontable th {
	text-align: left;
	font-weight: normal;
	opacity: 0.6;
	padding: 0 16px 4px 0;
}

.infopanel table.sessiontable td {
	padding: 2px 16px 2px 0;
	vertical-align: top;
	/* sizes line up when read down the column */
	font-variant-numeric: tabular-nums;
}

.infopanel .sessionid {
	opacity: 0.6;
}

.infopanel .sessionaction {
	margin-right: 10px;
	white-space: nowrap;
}

.infopanel .sessiontopactions .sessionaction {
	margin-right: 16px;
}

.sessionmessage {
	color: var(--selected-border);
}

/* new session dialog */
/* (comment by Claude) */

.dialogscrim {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: var(--dialog-scrim);
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 100;
}

.dialogbox {
	background-color: var(--dialog-background);
	color: var(--dialog-text);
	border: 1px solid var(--dialog-border);
	border-radius: 4px;
	padding: 16px;
	min-width: 320px;
}

.dialogtitle {
	margin: 0 0 12px 0;
	font-weight: bold;
}

.dialoginput {
	width: 100%;
	box-sizing: border-box;
	padding: 4px;
	background-color: var(--dialog-input-background);
	color: var(--dialog-text);
	border: 1px solid var(--dialog-border);
}

.dialogbuttons {
	margin-top: 12px;
	display: flex;
	gap: 8px;
	justify-content: flex-end;
}

.dialogbutton {
	background-color: var(--dialog-input-background);
	color: var(--dialog-text);
	border: 1px solid var(--dialog-border);
	border-radius: 3px;
	padding: 4px 12px;
	cursor: pointer;
}

/*
The note number table. Tabular numerals and a fixed column width so the digits
line up down the page -- a reference is read by running your eye down a column,
and ragged numbers make that impossible.

(comment by Claude)
*/
.infopanel table.noteref {
	border-collapse: collapse;
	font-family: monospace;
	font-size: 12px;
	font-variant-numeric: tabular-nums;
	margin-top: 4px;
}

.infopanel table.noteref th {
	text-align: left;
	font-weight: normal;
	opacity: 0.6;
	padding: 2px 14px 4px 0;
	position: sticky;
	top: 0;
	background-color: var(--help-background, inherit);
}

.infopanel table.noteref td {
	padding: 1px 14px 1px 0;
}

.infopanel table.noteref .noterefnum,
.infopanel table.noteref .noterefhz {
	text-align: right;
}

/* every C, so an octave is easy to find without counting rows */
/* (comment by Claude) */
.infopanel table.noteref tbody tr:nth-child(12n + 1) td {
	border-top: 1px solid var(--unselected-border);
}

/* middle C, called out because it is the row everybody looks for */
/* (comment by Claude) */
.infopanel table.noteref tr.noterefmiddle td {
	font-weight: bold;
}

.infopanel table.noteref .noterefnote {
	font-style: italic;
	opacity: 0.75;
	font-weight: normal;
	padding-left: 2px;
}