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


.wavetable {
	display: none;
}



.wavetable.exploded {
	border: 3px solid var(--unselected-border);
	background-color: var(--unselected-border);
	display: flex;
	flex-direction: column;
	align-items: stretch;
	padding: 2px;
}

.wavetable.editing {
	background-color: var(--editing-background);
}

.wavetable canvas {
	display: block;
}

/* the playhead is positioned against this, so it has to be the canvas's box */
/* (comment by Claude) */
.waveviewport {
	position: relative;
	align-self: flex-start;
}

/* stacked exactly on the waveform canvas, and never in the way of a click */
/* (comment by Claude) */
.waveplayhead {
	position: absolute;
	top: 0;
	left: 0;
	pointer-events: none;
}

/*
The guide through the edit line, see showGuide in wavetable.js. The anchor sits
at the line inside the wave; the guide is fixed to the window and takes its x
from the anchor. If the anchor is gone, the fallback puts it off screen.
(comment by Claude)
*/
.waveguideanchor {
	position: absolute;
	top: 0;
	width: 0;
	height: 1px;
	anchor-name: --wave-edit-line;
	pointer-events: none;
}

.waveguide {
	display: none;
	position: fixed;
	position-anchor: --wave-edit-line;
	left: anchor(left, -10px);
	top: var(--top-panel-h);
	bottom: 0;
	width: 1px;
	background-color: var(--wave-playhead);
	opacity: 0.5;
	pointer-events: none;
	z-index: 1000;
}

.wavetable.newselected {
	border: 3px solid var(--selected-border);	
}

/* the waveform only -- the playhead layer on top of it has to stay
   transparent, and a bare `canvas` selector paints that one too */
/* (comment by Claude) */
.wavetable canvas.wavecanvas {
	background-color: var(--wave-canvas-background, #ffffff);
}

.wavecontrols {
	padding: 2px;
	display: flex;
	flex-direction: row;
	margin-bottom: 2px;
}

/*
Condensed is how waves look. They pack together so a stack of them can be
compared by eye: everything that is not wave stops taking up height -- the
duration, the tags and the recording button move onto the waveform itself (the
.wavemeta overlay, built in wavetable.js) -- and most of the box around an
wave goes, because 3px of border and 2px of padding is 10px you are trying to
see past.

Two exceptions, and both are a class, so that the way waves normally look is
what you get with nothing set. body.fullwaves is the toggle (ctrl-backslash),
for when you want every wave labelled at once. .editing is the wave you are
working on, which is on its own anyway and wants its markers and its timebase
out where they can be read rather than cropped to the length of the sound.

A wave too short for its own metadata gets a field beside it instead of a
cropped label. That is what the full layout does -- a wave shorter than its
control strip sits in a box wider than itself -- and the field is the thing
that says so: box longer than wave means the extra is room for the labels, not
sound. The editing pink, which is the colour that field already has in the full
layout, and it does not depend on which wave is selected -- it is a fact about
the wave and the labels on it rather than about where you are.

The stack is a one cell grid: the canvases and the metadata row are all in that
one cell, so they draw on top of each other and the cell is as big as the
widest of them. Hence the field, with no measuring -- an absolutely positioned
row would hang outside the box instead of making room in it. Everything is
pinned to the start of the cell, because a canvas told to fill it would be
stretched, and a stretched canvas is a waveform at the wrong scale.

(comment by Claude)
*/
body:not(.fullwaves) .wavetable:not(.editing) .waveviewport {
	display: grid;
	background-color: var(--editing-background);
}

body:not(.fullwaves) .wavetable:not(.editing) .waveviewport > * {
	grid-area: 1 / 1;
	justify-self: start;
	align-self: start;
}

/*
Selection recolours this border, it does not thicken it (see .newselected
above, which asks for 3px and loses on specificity here). A wave that grew by
4px each way when you landed on it moved every wave under it and changed the
scale you were comparing them at -- and nothing else in vodka does that: a
selected command is drawn red, not bigger.

(comment by Claude)
*/
body:not(.fullwaves) .wavetable:not(.editing) {
	border-width: 1px;
	padding: 0;
}

/*
The corner of the waveform, which is where a wave is usually quietest and
where the eye already is. Transparent to the mouse, because the wave underneath
is dragged and clicked everywhere a label is not -- the labels themselves take
their own clicks back.

(comment by Claude)
*/
.wavemeta {
	margin: 3px 0 0 3px;
	display: flex;
	flex-direction: row;
	align-items: flex-start;
	pointer-events: none;
}

.wavemeta > * {
	pointer-events: auto;
}

/* little rectangles in a row, tighter than the same things get above a wave
   where there is height to spare */
/* (comment by Claude) */
.wavemeta .wavecontrol,
.wavemeta .tag.exploded {
	margin: 0 2px 0 0;
	padding: 1px 3px;
	flex-grow: 0;
	white-space: nowrap;
}

/*
A box around it, because the control background and the canvas background are
the same colour -- white on white in the light theme, near enough in the dark
one -- and over a wave that is the difference between a label and nothing. It
only showed up before where the sound was loud enough to draw behind it.

The text colour rather than a colour of its own: it is the same ink as the
numbers it is around.

(comment by Claude)
*/
.wavemeta .wavecontrol {
	border: 1px solid var(--wave-control-text);
}

/*
An unselected wave is a waveform with its tags on it, and nothing else: the
duration and the other controls are noise over fifty waveforms. The one you are
on shows everything.

No mode in this rule: the overlay is built only on a wave that is condensed, so
anywhere it exists this is what it is for.

(comment by Claude)
*/
.wavetable:not(.newselected) .wavemeta > *:not(.tag) {
	display: none;
}

/*
The tags do show on a wave you are not on, but they do not get to make it
wider: a wave is as wide as its sound, and its tags are cut off at the edge of
it. Zero wide, so the row adds nothing to the size of the cell, and then
stretched back out to the width the canvas gave the cell, so the tags have the
whole wave to sit in before they are clipped. The one you are on still grows to
show all of them.

(comment by Claude)
*/
.wavetable:not(.newselected) .wavemeta {
	width: 0;
	min-width: calc(100% - 3px);
	overflow: hidden;
}

.wavetable:not(.newselected) .wavemeta > * {
	flex-shrink: 0;
}

/*
And it says it with one letter. Four characters of "mute" over a waveform you
are not working on is wider than the thing it is telling you, and `m` on a wave
is unambiguous because it is the only word that ever appears there. The wave
you are on spells it out, and so does one in the full layout or being edited,
where there is room.

Drawn, not stored. The tag is `mute` wherever it is written down -- that is
what the builtins look for and what goes in the file -- and this is css rather
than a shorter tag string for exactly that reason, as well as because selecting
a nex re-colours it without re-rendering it.

(comment by Claude)
*/
.wavetable:not(.newselected) .wavemeta .tag-mute.exploded {
	font-size: 0;
}

.wavetable:not(.newselected) .wavemeta .tag-mute.exploded::before {
	content: 'm';
	font-size: 9px;
}

.wavecontrol {
	background-color: var(--wave-control-background);
	color: var(--wave-control-text);
	border-radius: 2px;
	font-family: Courier;
	font-size: 9px;
	padding: 2px;
	flex-grow: 1;	
	margin-left: 1px;
	margin-right: 1px;
}

.markerlist {
	display: flex;
	flex-direction: row;
	margin-right: 30px;	
}

.addmarker {
	margin-left: 8px;
}

.wavecontrolspacer {
	flex-grow: 10000;	
}