/*
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/>.
*/


* {
	box-sizing:border-box;
}

body, html {
	cursor: default;
	margin: 0;
	padding: 0;
	width: 100%;
	height:100%;
}

/*
How much of the top of the window the top panel takes, 0 when it is closed.
Everything that sits at the top of the window reads this: the document is
padded down by it, and the help button, status bar, toasts and guide line all
start below it. One number so they all move together, and registered so it can
be animated, which is what makes the panel slide rather than jump.

(comment by Claude)
*/
@property --top-panel-h {
	syntax: '<length>';
	inherits: true;
	initial-value: 0px;
}

html {
	--top-panel-h: 0px;
	transition: --top-panel-h 150ms ease-out;
	/* so a native scrollIntoView stops below the panel too */
	scroll-padding-top: var(--top-panel-h);
}

html.toppanelopen {
	--top-panel-h: 100px;
}

/*
The document is pushed down by padding, not by putting the panel in its way,
and inside the body's height rather than added to it -- so the page is no
taller with the panel open and there is no scrollbar just for the panel.

(comment by Claude)
*/
body {
	padding-top: var(--top-panel-h);
}

#codepane {
	height: 100%;
	width: 100%;

	/*
	No sweeping a highlight across a document. A nex is not a run of text you
	can pick a piece out of -- selecting is what the pip does, copying is a
	key -- so the browser's idea of a selection is only ever in the way. See
	mousedefaults.js, which stops the rest of it.

	Scoped to the pane, so the help panel, the dialogs and the api reference
	keep ordinary selectable text.

	(comment by Claude)
	*/
	-webkit-user-select: none;
	user-select: none;

	/* a two finger swipe otherwise goes Back, and Back is the whole session */
	/* (comment by Claude) */
	overscroll-behavior-x: none;
}

/* a picture inside a document is part of the document, not something to peel
   off and drop somewhere else */
/* (comment by Claude) */
#codepane img {
	-webkit-user-drag: none;
	user-drag: none;
}

#vodkaroot {
	/* never smaller than the viewport, but grows to fit a doc that overflows it,
	   so the selected-root border surrounds the whole doc and not just the
	   first screenful */
	/* (comment by Claude) */
	min-height: 100%;
	min-width: 100%;
	width: fit-content;
}

.glyphleft {
	padding-right: .2em;	
}

.glyphright {
	padding-left: .2em;
	opacity: .4;
}

.faint {
	opacity: .4;
}

#vodkaroot.exploded.newselected {
	padding: 3px;
	border: 3px solid var(--selected-border);	
}

.data {
}

.nex {
	position:static;

}

.duplicatednex {
	position:relative;
}

/*
A collapsed nex is a box with a backslash in it, and size is what says which
kind it is. A container keeps its own outline and the colour runs all the way
out to it; a leaf has no outline of its own, so the box is the whole of it.

(comment by Claude)
*/
/*
div. on the front only to win. Some nexes set a background of their own with
three classes, the same as this has, and then whichever stylesheet happened to
load later decided the colour -- a collapsed boolean came out blue. One element
name is the smallest thing that settles it.

(comment by Claude)
*/
div.nex.collapsed.exploded {
	background-color: var(--collapsed-background);
}

/*
The size belongs to the mark, not to the nex. Put on the nex it is inherited by
whatever the nex kept -- a command keeps its codespan, which is .95em of its
parent, so the whole front of it came out at nine pixels instead of fifteen and
looked squashed beside an uncollapsed one.

(comment by Claude)
*/
/*
Every one of these is the same mark, so none of it is inherited: a boolean is
bold and upright, a command is italic, and a backslash drawn in either leans
differently from the same backslash drawn in the other.

(comment by Claude)
*/
.collapsed-mark {
	font-family: Courier;
	font-size: 10px;
	font-style: normal;
	font-weight: bold;
	color: var(--collapsed-text);
	padding: 2px 5px 2px 5px;
}

.root {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
}


.render-depth-exceeded {
	border: 2px dashed var(--oom-text);
	padding-top: 8px;
	padding-bottom: 8px;
	padding-left: 25px;
	padding-right: 25px;
	color: var(--oom-text);
	font-size: 30px;
	background-color: var(--oom-background);
}

/*
The ghost id: the same nex drawn in more than one place at once, marked with
its id in every place it appears. Only ever present when that has happened --
prependObjectTag (nex.js:351) is the only thing that makes one -- so there is
no state in which this should be hidden.

It used to be `.exploded > .objecttag`, which meant normal mode silently
dropped the warning. That is backwards. Normal mode is where it matters most:
a template that hands the same immutable doc to eight instances gives all eight
the same face, and since wait-for-click writes its handler into a single slot
on the nex (asyncfunctions.js:154), only the last one of them answers a click.
Nothing about that is visible in a finished interface. The ghost id is the one
thing that says so.

(comment by Claude)
*/
.objecttag {
	border: 1px solid var(--oom-strong-border);
	background-color: var(--oom-strong-background);
	color: var(--oom-strong-text);
	display: flex;
	flex-direction: row;
	align-items: flex-start;
	font-family: Courier;
	font-size: 9px;
	padding: 2px 2px 2px 2px;
	position:absolute;
	left: -5px;
	top: -8px;
	opacity: 0.2;
}

/*
Stronger in normal mode. Exploded, the repeat is half visible anyway -- the
same structure is drawn twice and you can see it -- so the mark only has to
confirm it. Normal mode shows a finished thing with no structure on screen at
all, so the mark is carrying the whole warning by itself, and it is sitting on
top of whatever colour the interface chose.

(comment by Claude)
*/
.nex:not(.exploded) > .objecttag {
	opacity: 0.55;
}

/* the one you are on reads clearly; the rest stay out of the way */
.newselected > .objecttag {
	opacity: 1.0;
	z-index: 100;
}


/*
#wavetablemanipulator {
	position: absolute;
	width: 100%;
	height: 100%;
	display: none; / * code changes it to block * /
	justify-content: center;
	align-items: center;
}

#wtmpanel {
	width: 400px;
	height: 300px;
	opacity: 0.1;
	background-color: var(--wtm-panel);
	display: flex;
	flex-direction: row;
	align-items: flex-start;
	justify-content: space-between;
}

#wtmclosebutton {
	width: 30px;
	height: 30px;
	background-color: var(--wtm-control);
}

#wtmvertzoom {
	width: 60px;
	background-color: var(--wtm-control);
	align-self: stretch;
	margin-top: 20px;
	margin-bottom: 20px;
}


#wtmhorizgroup {
	align-self: stretch;
	width: 200px;
	display: flex;
	flex-direction: column;	
	align-items: stretch;
	justify-content: space-between;
	margin-right: 20px;
	margin-bottom: 20px;
	margin-top: 20px;
}

#wtmhorizzoom {
	height: 80px;
	background-color: var(--wtm-control);
}

#wtmhorizscroll {
	height: 80px;
	background-color: var(--wtm-control);
}

#wtmhorizsize {
	height: 80px;
	background-color: var(--wtm-control);
}*/