/* ---------- lyrics from a file (views/lyrics-drop.js): the curtain while dragging, the reading, the results */

/* the whole screen becomes the place to drop, while a text file is dragged over it */
.ld-curtain { position: fixed; inset: 0; z-index: 90; display: grid; place-items: center; background: color-mix(in srgb, var(--paper) 86%, transparent);
  opacity: 0; pointer-events: none; transition: opacity var(--mid) var(--ease); }
.ld-curtain.in { opacity: 1; }
.ld-target { display: grid; justify-items: center; gap: 6px; padding: 42px 56px; border: 2.5px dashed var(--red); border-radius: 18px; background: var(--paper); color: var(--ink);
  transform: scale(.94); transition: transform var(--mid) var(--ease); }
.ld-curtain.in .ld-target { transform: none; animation: ld-breathe 1.6s ease-in-out infinite; }
.ld-target .ic { color: var(--red); }
.ld-target b { font-family: var(--head); font-weight: 400; font-size: 26px; }
.ld-target span { color: var(--muted); }
@keyframes ld-breathe { 50% { border-color: color-mix(in srgb, var(--red) 40%, transparent); } }

.ld-queue { display: flex; gap: 6px; }
.ld-q { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; font-size: 12px; border: 1px solid var(--line2); color: var(--muted); transition: background var(--mid), color var(--mid), border-color var(--mid); }
.ld-q.on { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.ld-q.done { background: var(--ok); color: #fff; border-color: var(--ok); }

.ld-file { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.ld-file b { font-family: var(--head); font-weight: 400; font-size: 17px; }
.ld-num { font-size: 13px; padding: 2px 10px; border-radius: 20px; background: var(--ink); color: var(--paper); animation: rise var(--mid) var(--ease) backwards; }
.ld-num.none { background: color-mix(in srgb, var(--warn) 16%, var(--paper)); color: var(--warn); }

/* ---------- reading: the file's own lines, a red line passing over them, each line taking its singer's colour */
.ld-scan { display: grid; gap: 10px; animation: rise var(--mid) var(--ease) backwards; }
.ld-lines { position: relative; max-height: min(46vh, 420px); overflow-y: auto; scrollbar-width: none; border: 1px solid var(--line); border-radius: 10px; padding: 10px 14px; font-size: 14px; line-height: 1.75; }
.ld-l { color: color-mix(in srgb, var(--ink) 30%, transparent); padding-inline-start: 10px; border-inline-start: 3px solid transparent;
  border-image: linear-gradient(var(--c) 50%, var(--c2) 50%) 1; transition: color .35s, border-color .35s; }
.ld-l.on { color: var(--ink); }
.ld-l.title { font-family: var(--head); font-size: 16px; color: var(--ink); border-image: none; border-color: transparent; padding-top: 6px; animation: ld-pop .4s var(--ease) backwards; }
.ld-l.names { font-weight: 500; font-size: 12.5px; color: var(--muted); }
.ld-l.odd { background: color-mix(in srgb, var(--warn) 9%, transparent); }
.ld-beam { position: absolute; inset-inline: 0; top: var(--scan, 0); height: 2px; background: var(--red); box-shadow: 0 0 0 3px color-mix(in srgb, var(--red) 15%, transparent); transition: top .12s linear; pointer-events: none; }
@keyframes ld-pop { from { opacity: 0; transform: translateX(8px); } to { opacity: 1; transform: none; } }
.ld-say { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; background: var(--ink); color: var(--paper); border-radius: 10px; padding: 10px 14px; animation: rise var(--mid) var(--ease) backwards; }
.ld-say b { font-family: var(--head); font-weight: 400; font-size: 16px; }
.ld-say span:not(.spin) { opacity: .75; font-size: 13px; }
.ld-say .spin { width: 18px; height: 18px; border-color: color-mix(in srgb, var(--paper) 30%, transparent); border-top-color: var(--paper); }

/* ---------- results: every part of the file, in its order */
.ld-res { display: grid; gap: 10px; animation: rise var(--mid) var(--ease) backwards; }
.ld-sum { display: flex; gap: 16px; flex-wrap: wrap; font-weight: 500; }
.ld-sum > span { display: inline-flex; align-items: center; gap: 6px; }
.ld-sum .ok, .ld-st.ok, .ld-row.ok .ld-ic { color: var(--ok); }
.ld-sum .warn, .ld-st.warn, .ld-row.warn .ld-ic { color: var(--warn); }
.ld-list { display: grid; gap: 6px; }
.ld-row { border: 1px solid var(--line); border-radius: 8px; padding: 8px 10px; animation: rise var(--mid) var(--ease) backwards; animation-delay: calc(min(var(--i, 0), 14) * 40ms); transition: border-color var(--mid), background var(--mid); }
.ld-row.muted .ld-ic, .ld-st.muted { color: var(--muted); }
.ld-row.ok { background: color-mix(in srgb, var(--ok) 6%, var(--paper)); }
.ld-row.ask { border-color: var(--warn); }
.ld-row-h { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.ld-st { font-size: 12.5px; font-weight: 500; }
.ld-ask { display: grid; gap: 8px; margin-top: 8px; animation: rise var(--mid) var(--ease) backwards; }
.ld-peek { font-size: 13px; color: var(--muted); border-inline-start: 2px solid var(--line2); padding-inline-start: 8px; }
.ld-modes { display: flex; gap: 6px; flex-wrap: wrap; }
.ld-modes button { display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 12px; border: 1px solid var(--line2); border-radius: var(--r); background: var(--paper); cursor: pointer; font-weight: 500;
  transition: background var(--fast), color var(--fast), border-color var(--fast), transform var(--fast); }
.ld-modes button:hover { border-color: var(--ink2); }
.ld-modes button:active { transform: scale(.97); }
.ld-modes button.on { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.ld-modes button.ghost { border-color: transparent; color: var(--muted); padding: 0 8px; }
.ld-pick { display: flex; align-items: center; gap: 8px; animation: fade var(--mid) var(--ease) backwards; }
.ld-pick .pick { flex: 1 1 260px; }
.ld-pick .spin { width: 18px; height: 18px; }
.ld-miss { margin: 0; font-size: 13px; }
.ld-err { display: grid; justify-items: center; gap: 6px; text-align: center; padding: 22px; color: var(--warn); animation: rise var(--mid) var(--ease) backwards; }
.ld-err span { color: var(--ink2); }
.ld-foot { animation: rise var(--mid) var(--ease) backwards; }