/* waterfall.css — the band as a roll of paper.
   Widget: web/js/waterfall.js

   Three stacked layers, so scrolling and zooming are done by the compositor rather than by
   redrawing: a static background, the paper moved by a transform, and the marker above it. The
   paper is one texture -- blitting two slices of a ring instead put a seam on a fractional
   pixel, which shimmered as it moved. */

/* The card holds the layers and nothing else, so it gives them all of its room. */
.wcard.w-waterfall{padding:2px;}
/* The floor belongs to the card that needs it: below this the depth of paper stops being a
   reading. The card is also the slot, so this has to outweigh the `min-height:0` every row item
   carries. */
[data-slot].wcard.w-waterfall{min-height:120px;}

/* The plot area is the card content box, like the spectrum overlay. */
.wfwrap{position:absolute; top:2px; left:2px; width:calc(100% - 4px); height:calc(100% - 4px);}
#wfGrid{position:absolute; inset:0; width:100%; height:100%;}
/* The clipping window sits between the two gutters; the same values are set from the script. */
.wfclip{position:absolute; top:0; right:0; bottom:16px; left:34px; overflow:hidden;}
/* Promoted to its own compositor layer, which makes the transform free and repaint-less. Its
   real size is set from the script and left automatic here, so it is not capped.
   Resampling is left to the browser: a column is a point of the DRAWN curve, several per
   channel, so whatever falls between two columns is the spectrum's own interpolation and not
   an invented value. Forcing hard pixels instead would drop narrow crests when zoomed out. */
.wfpaper{position:absolute; top:0; left:0; width:auto; height:auto;
         will-change:transform; transform:translateZ(0);}
/* The marker and the crosshair float above the paper and let gestures through: they are heard
   on the wrapper, so there is one listener however the layers are stacked. */
#wfOv{position:absolute; inset:0; width:100%; height:100%; pointer-events:none;}
/* An analyser: the pointer reads a measurement, and pressing tunes there. */
.wfwrap{cursor:crosshair;}