/* this page is grids of plots, not prose, so the 900px reading measure does not
   apply; a wider tile also means more stft frames, since the spectrogram plugin
   computes one frame per horizontal pixel */
.content { max-width: 1150px; }

/* page title */
.page-title { text-align: center; margin: 0 0 34px; }

/* audio tiles reuse .gallery; the media slot holds a waveform over a spectrogram */
:root {
  --wave-h: 36px;
  --spec-h: 48px;
  --media-gap: 12px;
  --tile-pad: 15px;          /* .gallery > div.flex-column padding, from frame.css */
}
.wave, .spec {
  overflow: hidden;
}
.wave {
  height: var(--wave-h);
  cursor: pointer;
  border-radius: 2px 2px 0 0;
}
.spec {
  height: var(--spec-h);
  border-radius: 0 0 2px 2px;
  margin-top: var(--media-gap);
}
/* the name sits in the plot area while it is empty and stays once the drawing
   arrives, over it rather than under it, so a tile can be picked out again
   without hovering anything. Nothing reacts to the pointer here: the name is
   always readable, so dimming the plot to uncover it would only be a flicker.
   Where there is no hover at all the name drops below the plots instead */
/* z-index 0 makes each media box a stacking context, which traps wavesurfer's
   own layers -- the core draws at 2 and 5, the spectrogram plugin at 4 and 9 --
   so a row label only has to clear the box rather than outrank every canvas */
.media { position: relative; z-index: 0; }
.label span,
.gm-label span {
  max-width: 94%;
  text-align: center;
  /* no box of its own: a halo in the page colour lifts the words off a dark
     spectrogram without drawing a shape around them */
  text-shadow: 0 0 3px #fff, 0 0 3px #fff, 0 0 6px #fff;
}
.label {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  pointer-events: none;
  z-index: 10;
}
@media (hover: none) {
  .label { position: static; margin-top: 10px; }
  /* below the plot there is nothing to read over, so the halo comes off */
  .label span, .gm-label span { text-shadow: none; }
}
.ctrl {
  display: flex;
  gap: 4px;
  justify-content: center;
  margin-top: 6px;
}
.ctrl button {
  border: 0;
  background: none;
  padding: 3px 6px;
  line-height: 0;
  cursor: pointer;
  color: #999;
}
.ctrl button:hover { color: #222; }
.ctrl svg { width: 12px; height: 12px; fill: currentColor; }
/* the two values a reader might act on: the index they can look up, and the note
   it was rendered at. brighter and bolder than the site's link colours */
.v-idx, .v-pitch { font-weight: 700; }
.v-idx { color: #8b3ffd; }
.v-pitch { color: #12a150; }

/* one button, two glyphs: the tile's .playing class decides which shows */
.pause-icon, .playing .play-icon { display: none; }
.playing .pause-icon { display: inline; }


/* a general midi row shares one label, spanning the row across the plot band and
   staying there once the tiles are drawn, the same as a tile's own name */
.gm-row { position: relative; }
.gm-label {
  position: absolute;
  top: var(--tile-pad);
  left: 0;
  right: 0;
  height: calc(var(--wave-h) + var(--media-gap) + var(--spec-h));
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  pointer-events: none;
  z-index: 1;
}
@media (hover: none) {
  .gm-label { position: static; height: auto; margin-bottom: 6px; }
}

/* four tiles at 25% sum to exactly the gallery's content box; 24% leaves slack */
@media screen and (min-width: 900px) {
  .gallery > .flex-column { flex-basis: 24%; max-width: 24%; }
}

/* the reshuffle rides the heading's baseline at the far right. No box of its
   own: it takes the heading's font, one size down, italic and grey, and answers
   the pointer by going bold black rather than by lighting up */
.head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  /* frame.css puts 20px above every h2. The wrapper is the block in flow now,
     so the margin moves here: on the h2 it would push the flex line instead */
  margin-top: 20px;
}
.head h2 { margin: 0; }
.refresh {
  flex: none;
  border: 0;
  background: none;
  padding: 0;
  font: inherit;
  font-size: 16px;
  font-style: italic;
  color: #888;
  cursor: pointer;
  transition: color .15s;
}
.refresh:hover { color: #000; font-weight: 700; }
/* bold is wider than regular, so the label would shuffle left on hover. The
   grid stacks a hidden bold copy under the real one and takes the wider of the
   two, which holds the width steady through the change */
.lbl { display: inline-grid; }
.lbl::after {
  content: attr(data-t);
  font-weight: 700;
  height: 0;
  visibility: hidden;
}