/* Lyricsync web app */

body.app {
  height: 100svh; display: grid; grid-template-rows: auto minmax(0, 1fr);
  background: var(--night); overflow: hidden;
}

/* ---------------------------------------------------------------- top bar */
.bar {
  position: relative; z-index: 10; display: flex; align-items: center; gap: 1.5rem;
  padding: 10px 20px; background: var(--night); border-bottom: 1px solid rgba(245, 243, 255, .08);
}
.mark {
  display: inline-flex; align-items: center; gap: .5rem; text-decoration: none;
  font-weight: 720; font-stretch: 115%; font-size: 1.2rem; letter-spacing: -.012em; line-height: 1;
}
.mark-glyph { width: 26px; height: 26px; color: var(--paper); }

.modes { display: flex; gap: 3px; padding: 4px; border-radius: 999px; background: var(--stage); }
.modes button {
  min-height: 38px; padding: .4em 1.1em .35em; border: 0; border-radius: 999px; background: transparent;
  color: var(--soft); font-weight: 600; cursor: pointer; transition: background .2s, color .2s;
}
.modes button:hover { color: var(--paper); }
.modes button[aria-selected="true"] { background: var(--paper); color: var(--ink); }

.tools { margin-left: auto; display: flex; gap: 6px; }
.tool {
  display: inline-flex; align-items: center; gap: .45em; min-height: 40px; padding: .4em .85em;
  border-radius: 10px; border: 1px solid rgba(245, 243, 255, .18); background: transparent; color: var(--soft);
  font-weight: 500; cursor: pointer;
}
.tool:hover { color: var(--paper); border-color: rgba(245, 243, 255, .45); }
.tool svg { width: 18px; height: 18px; }
.tool[aria-pressed="true"], .tool[aria-expanded="true"] { background: var(--paper); color: var(--ink); border-color: var(--paper); }

.settings {
  position: absolute; right: 16px; top: calc(100% + 8px); width: min(340px, calc(100vw - 32px)); padding: 18px;
  border-radius: 16px; background: var(--stage); box-shadow: 0 24px 60px -20px rgba(3, 4, 30, .8); z-index: 30;
}
.field { display: grid; gap: 6px; margin-bottom: 16px; }
.field span { font-size: var(--s-1); color: var(--soft); }
.field select {
  min-height: 44px; padding: .4em .7em; border-radius: 10px; border: 1px solid rgba(245, 243, 255, .22);
  background: var(--night); color: var(--paper);
}
.field input[type="range"] { accent-color: var(--marigold); }
.keys { margin: 0; font-size: var(--s-1); line-height: 2; color: var(--dim); }
kbd {
  font-family: inherit; font-size: .92em; padding: .05em .45em; margin-right: .15em; border-radius: 5px;
  background: var(--night); border: 1px solid rgba(245, 243, 255, .2); color: var(--paper);
}
.keys kbd:not(:first-child) { margin-left: .6em; }
.keys kbd + kbd { margin-left: 0; }

/* ---------------------------------------------------------------- layout */
.layout { display: grid; grid-template-columns: minmax(320px, 400px) minmax(0, 1fr); min-height: 0; }

.panel { background: var(--stage); padding: 28px 24px 32px; overflow: auto; }
.panel h1 {
  margin: 0 0 1.25rem; max-width: 18ch; font-size: var(--s2); line-height: 1.08; font-weight: 680; font-stretch: 90%;
}
.note { margin: 1.25rem 0 0; color: var(--dim); font-size: var(--s-1); }

.choices { display: grid; gap: 10px; }
.choice {
  display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: 14px; align-items: start; text-align: left;
  padding: 16px; border-radius: 16px; border: 1.5px solid rgba(245, 243, 255, .2);
  background: rgba(14, 17, 99, .35); color: var(--paper); cursor: pointer; transition: border-color .2s, background .2s;
}
.choice:hover { border-color: var(--paper); background: rgba(14, 17, 99, .6); }
.choice svg { width: 28px; height: 28px; color: var(--marigold); }
.choice strong { display: block; font-weight: 650; font-size: 1.12rem; line-height: 1.25; }
.choice small { display: block; margin-top: .25rem; color: var(--soft); font-size: var(--s-1); line-height: 1.45; }
.choice[disabled] { opacity: .5; cursor: not-allowed; }

.live { margin-top: 18px; padding: 16px; border-radius: 16px; background: var(--night); }
.meter { display: flex; align-items: center; gap: 3px; height: 44px; }
.meter span {
  flex: 1; height: 100%; border-radius: 2px; background: var(--fill);
  transform: scaleY(var(--h, .06)); transition: transform .08s linear;
}
.status { margin: .8rem 0 1rem; font-weight: 500; line-height: 1.35; }
.status::before {
  content: ""; display: inline-block; width: 9px; height: 9px; margin-right: .55em; border-radius: 50%;
  background: var(--cue); vertical-align: .08em; animation: blink 1.4s infinite;
}
@keyframes blink { 50% { opacity: .35; } }
.live-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.live-actions .btn, .inline-form .btn { min-height: 44px; padding: .45em 1.05em .4em; }

.inline-form { display: flex; gap: 8px; }
.inline-form input {
  flex: 1; min-width: 0; min-height: 48px; padding: 0 14px; border-radius: 12px;
  border: 1.5px solid rgba(245, 243, 255, .25); background: var(--night); color: var(--paper);
}
.inline-form input::placeholder { color: var(--dim); }
.inline-form input:focus { border-color: var(--marigold); outline: none; }

.yt-wrap { margin-top: 16px; aspect-ratio: 16 / 9; border-radius: 14px; overflow: hidden; background: #000; }
.yt-wrap iframe, #yt-player { width: 100%; height: 100%; display: block; border: 0; }

.results { list-style: none; margin: 16px -8px 0; padding: 0; display: grid; gap: 2px; }
.results button {
  width: 100%; display: grid; grid-template-columns: 48px minmax(0, 1fr) auto; gap: 12px; align-items: center;
  padding: 8px; border: 0; border-radius: 12px; background: transparent; color: var(--paper); text-align: left; cursor: pointer;
}
.results button:hover { background: rgba(14, 17, 99, .55); }
.results img, .results .ph { width: 48px; height: 48px; border-radius: 8px; object-fit: cover; background: var(--night); }
.r-title, .r-artist { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.r-title { font-weight: 600; }
.r-artist { color: var(--soft); font-size: var(--s-1); }
.r-meta { color: var(--dim); font-size: var(--s-1); text-align: right; line-height: 1.3; }
.r-meta b { display: block; font-weight: 600; color: var(--marigold); }
.results .msg { padding: 8px; color: var(--soft); }

.drop {
  position: relative; display: grid; gap: 6px; justify-items: center; text-align: center; padding: 36px 20px;
  border: 2px dashed rgba(245, 243, 255, .3); border-radius: 18px; cursor: pointer; transition: border-color .2s, background .2s;
}
.drop:hover, .drop.over { border-color: var(--marigold); background: rgba(255, 194, 51, .06); }
.drop input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.drop strong { font-weight: 650; font-size: 1.1rem; }
.drop small { color: var(--soft); font-size: var(--s-1); max-width: 34ch; }
.drop:focus-within { outline: 3px solid var(--marigold); outline-offset: 3px; }
.file-player { margin-top: 16px; }
.file-player p { margin: 0 0 8px; font-weight: 600; overflow-wrap: anywhere; }
.file-player audio { width: 100%; }

/* ---------------------------------------------------------------- the lyric stage */
.stagearea {
  position: relative; display: grid; grid-template-rows: auto minmax(0, 1fr) auto auto; min-height: 0;
  padding: 22px clamp(20px, 4vw, 60px) 18px; background: var(--night);
}
.np { display: grid; grid-template-columns: 64px minmax(0, 1fr) auto; gap: 14px; align-items: center; margin-bottom: 8px; }
.np-cover { width: 64px; height: 64px; border-radius: 10px; object-fit: cover; background: var(--stage); }
.np-cover[src=""] { visibility: hidden; }
.np-text { min-width: 0; }
.np-title, .np-artist { margin: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.np-title { font-weight: 680; font-size: var(--s1); line-height: 1.2; }
.np-artist { color: var(--soft); }
.np-badge { margin: 0; font-size: var(--s-1); color: var(--dim); text-align: right; line-height: 1.35; }
.np-badge b { display: block; color: var(--paper); font-weight: 600; }

.lyrics {
  --size: 1;
  position: relative; overflow: hidden; min-height: 0;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 13%, #000 76%, transparent 100%);
  mask-image: linear-gradient(to bottom, transparent 0, #000 13%, #000 76%, transparent 100%);
}
.col { position: relative; padding-bottom: 60vh; will-change: transform; transition: transform .6s var(--ease); }
.ln {
  margin: 0 0 .4em; max-width: 30ch;
  font-size: calc(var(--size) * clamp(1.7rem, 3.2vw, 3.3rem)); line-height: 1.14; font-weight: 720; font-stretch: 84%;
  color: var(--haze); cursor: pointer; transition: color .35s, opacity .35s;
}
.ln.indic { line-height: 1.38; font-stretch: 92%; }
.ln:hover:not(.now) { color: var(--soft); }
.ln.past { color: color-mix(in srgb, var(--paper) 30%, var(--night)); }
.ln.now { color: var(--paper); }
.ln.now .kw { --unsung: color-mix(in srgb, var(--paper) 58%, var(--night)); }
.ln.far { opacity: .55; }
.ln.gap { font-size: calc(var(--size) * 1.5rem); letter-spacing: .35em; line-height: 1; margin-bottom: .9em; }
.ln.gap:empty { height: .1em; margin: 0 0 .4em; }
.ln.manual-hit { animation: hit .5s var(--ease); }
@keyframes hit { 30% { color: var(--marigold); } }

.empty { position: absolute; inset: 0; display: grid; align-content: center; gap: 14px; max-width: 36ch; }
.empty p { margin: 0; color: var(--soft); }
.empty .empty-big { color: var(--paper); font-size: clamp(2rem, 4vw, 3.5rem); line-height: 1.04; font-weight: 720; font-stretch: 84%; }
.empty .btn { justify-self: start; margin-top: 6px; }
.empty .btn.primary { margin-right: 8px; }

.sk { height: .9em; margin: 0 0 .55em; border-radius: 8px; background: rgba(245, 243, 255, .07);
  font-size: clamp(1.7rem, 3.2vw, 3.3rem); animation: pulse 1.2s infinite ease-in-out; }
.sk:nth-child(2) { width: 72%; } .sk:nth-child(3) { width: 54%; } .sk:nth-child(4) { width: 64%; }
@keyframes pulse { 50% { opacity: .45; } }

.transport {
  display: grid; grid-template-columns: auto auto minmax(0, 1fr) auto auto; align-items: center; gap: 12px;
  padding-top: 12px;
}
.play {
  width: 48px; height: 48px; display: grid; place-items: center; border: 0; border-radius: 50%;
  background: var(--marigold); color: var(--ink); cursor: pointer;
}
.play svg { width: 22px; height: 22px; }
.play .i-pause, .play.playing .i-play { display: none; }
.play.playing .i-pause { display: block; }
.time { color: var(--soft); font-size: var(--s-1); min-width: 2.8em; }
.scrub { width: 100%; accent-color: var(--marigold); }
.sync { display: inline-flex; border: 1px solid rgba(245, 243, 255, .2); border-radius: 999px; overflow: hidden; }
.sync button {
  min-height: 38px; padding: .3em .85em; border: 0; background: transparent; color: var(--soft);
  font-size: var(--s-1); font-weight: 500; cursor: pointer;
}
.sync button:hover { color: var(--paper); background: rgba(245, 243, 255, .06); }
.sync #offset { color: var(--paper); min-width: 5.2em; border-inline: 1px solid rgba(245, 243, 255, .14); }
.transport.listen .play { display: none; }
.transport.listen { grid-template-columns: auto minmax(0, 1fr) auto auto; }
.hint { margin: .6rem 0 0; color: var(--dim); font-size: var(--s-1); }

/* full screen: just the words */
.stagearea:fullscreen { padding: 5vh 7vw 3vh; }
.stagearea:fullscreen .ln { font-size: calc(var(--size) * clamp(2.4rem, 5vw, 5.6rem)); }
.stagearea:fullscreen .hint { display: none; }

.toast {
  position: fixed; left: 50%; bottom: 24px; z-index: 50; max-width: min(560px, 92vw);
  padding: .8em 1.2em; border-radius: 12px; background: var(--paper); color: var(--ink); font-weight: 500;
  box-shadow: 0 20px 50px -20px rgba(3, 4, 30, .7);
  opacity: 0; transform: translate(-50%, 16px); pointer-events: none; transition: opacity .25s, transform .25s var(--ease);
}
.toast.show { opacity: 1; transform: translate(-50%, 0); }

/* ---------------------------------------------------------------- small screens */
@media (max-width: 900px) {
  body.app { height: auto; min-height: 100svh; overflow: auto; }
  .bar { flex-wrap: wrap; gap: 10px 12px; padding: 10px 14px; }
  .modes { order: 3; width: 100%; overflow-x: auto; }
  .modes button { flex: 1; padding-inline: .7em; }
  .tool span { display: none; }
  .layout { grid-template-columns: 1fr; }
  .panel { padding: 20px 16px 24px; }
  .stagearea { min-height: 78svh; padding: 18px 16px 16px; }
  .np { grid-template-columns: 48px minmax(0, 1fr); }
  .np-cover { width: 48px; height: 48px; }
  .np-badge { grid-column: 1 / -1; text-align: left; }
  .np-badge b { display: inline; margin-right: .4em; }
  .transport { grid-template-columns: auto auto minmax(0, 1fr) auto; }
  .sync { grid-column: 1 / -1; justify-self: start; }
  .transport.listen { grid-template-columns: auto minmax(0, 1fr) auto; }
}