/* Singing in the web studio (webstudio/sing.js): the panel under "Sing, record & pass it on", in the studio's
   tokens (songbird/studio/identity.css). The part you sing to is a stage, lit in the dark as the karaoke and the
   online singing page are (their lane is drawn for a dark ground), in the paper page and the lamplit one alike. */

.websing { margin-top: 18px; }
.websing h3 { font-size: 15px; margin: 14px 0 6px; }
.websing .lead { font-size: 16px; }
.websing .sing-promises { margin: 8px 0 12px; padding-left: 20px; max-width: 46em; }
.websing .sing-promises li { margin: 6px 0; }
.websing label.check { display: inline-flex; gap: 6px; align-items: center; }
.websing .sing-choices { display: flex; flex-wrap: wrap; gap: 8px 16px; align-items: center; margin: 4px 0 8px; }
.websing .sing-choices select { font: inherit; }
.websing .sing-status { min-height: 1.5em; margin: 6px 0; }
.websing .sing-status.warn { color: var(--ochre); }
.websing .sing-portrait { white-space: pre-wrap; max-width: 46em; }
.websing .sing-sync { display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: center; margin-top: 8px; }
.websing .sing-sync input[type=range] { flex: 1 1 180px; max-width: 320px; accent-color: var(--red); }
.websing .sing-meter { display: inline-flex; gap: 6px; align-items: center; }
.websing .meter { display: inline-block; width: 90px; height: 8px; background: var(--wash); border: 1px solid var(--rule);
                  border-radius: var(--radius); overflow: hidden; }
.websing .meter > span { display: block; height: 100%; width: 0; background: var(--green); }
.websing .sing-about { margin-top: 14px; }

/* the stage: the notes to come, the words as they're sung */
.websing .sing-stage { position: relative; margin-top: 10px; padding: 10px; background: var(--stage); color: var(--stage-ink);
                       border-radius: var(--radius); }
.websing .sing-full { position: absolute; top: 18px; right: 18px; z-index: 2; font: 13px var(--sans); padding: 3px 9px;
                      border: 1px solid rgba(239, 230, 218, .25); border-radius: var(--radius); background: rgba(27, 22, 17, .7);
                      color: var(--stage-ink); cursor: pointer; }
.websing canvas.lane { display: block; width: 100%; height: clamp(170px, 28vh, 340px); background: var(--stage-panel);
                       border-radius: var(--radius); }
.websing .scroller { position: relative; height: clamp(200px, 26vh, 320px); overflow: hidden; margin-top: 10px;
                     background: var(--stage-panel); border-radius: var(--radius);
                     -webkit-mask-image: linear-gradient(transparent, #000 14%, #000 80%, transparent);
                     mask-image: linear-gradient(transparent, #000 14%, #000 80%, transparent); }
.websing .reel { position: absolute; left: 0; right: 0; top: 0; padding: 0 22px; transition: transform .5s cubic-bezier(.2, .7, .2, 1); }
.websing .reel .item { padding: 7px 0; transform-origin: left center; transform: scale(.74); opacity: .42; transition: transform .5s, opacity .5s; }
.websing .reel .item.current { transform: scale(1); opacity: 1; }
.websing .reel .item.past { opacity: .18; }
.websing .reel .label { color: var(--stage-red); font: 600 12px var(--sans); letter-spacing: .14em; text-transform: uppercase; margin-bottom: 3px; }
.websing .reel .words { padding: 0; font: 600 clamp(20px, 3.6vw, 34px)/1.22 var(--serif); }
.websing .reel .syl { background: linear-gradient(90deg, var(--sung) var(--p, 0%), var(--stage-ink) var(--p, 0%));
                      -webkit-background-clip: text; background-clip: text; color: transparent; }
.websing .reel .gap { display: flex; align-items: center; gap: 12px; margin: 2px 0 6px; color: var(--stage-dim); font-size: 13px; transition: opacity .6s; }
.websing .reel .gap.spent { opacity: 0; }
.websing .reel .track { flex: 0 0 140px; height: 4px; border-radius: 2px; background: #332b25; overflow: hidden; }
.websing .reel .fill { display: block; height: 100%; width: 0; background: var(--stage-dim); }
.websing .reel .dots i { display: inline-block; width: 9px; height: 9px; margin-right: 6px; border-radius: 50%; background: #3a322c; }
.websing .reel .dots i.on { background: var(--sung); }
.websing .reel .done { font-size: 20px; color: var(--stage-dim); padding: 16px 0; }
.websing .sing-bar { height: 4px; margin-top: 10px; background: #2e2722; overflow: hidden; }
.websing .sing-bar > div { height: 100%; width: 0; background: var(--stage-red); }

/* full screen: the browser's own, or the page's own where it has none (tools/karaoke.js fullScreen) */
.websing .sing-stage:fullscreen, .websing .sing-stage.fs { overflow-y: auto; padding: 12px 16px 24px; }
.websing .sing-stage.fs { position: fixed; inset: 0; z-index: 100; border-radius: 0; }
body.fs-on { overflow: hidden; }
.websing .sing-stage:fullscreen canvas.lane, .websing .sing-stage.fs canvas.lane { height: 42vh; }
.websing .sing-stage:fullscreen .scroller, .websing .sing-stage.fs .scroller { height: 36vh; }
.websing .sing-stage:fullscreen .words, .websing .sing-stage.fs .words { font-size: clamp(28px, 4.6vw, 56px); }

@media (max-width: 600px) {
  .websing .reel { padding: 0 12px; }
  .websing .sing-stage { padding: 6px; }
}