/* CSL Lyrics — karaoke overlay styles (zero dependencies)
   4 DISTINCT MODES (operator request: fewer words, smaller font, interchange):
   - CLASSIC  (line-mode)    : full line, big lyric-video karaoke
   - SINGLE   (compact-mode) : ONE giant word at a time — spotlight
   - WAVE     (ticker-mode)  : horizontal wave — active word lifts, neighbors cascade
   - STACK    (caption-mode) : 3-line stack — prev/act/next visible, vertical slide
   Auto-rotates each track in hook; pill + L key still work.
*/
.csl-lyr {
    --csl-lyr-accent: #1db954;
    --csl-lyr-scrim: rgba(2, 4, 8, 0.55);
    font-family: 'Inter', 'Space Grotesk', system-ui, sans-serif;
    position: relative;
    width: 100%;
}
.csl-lyr .word {
    color: #5b6472;
    display: inline-block;
    margin-right: 0.34em;
    transition: color 0.09s linear, transform 0.12s ease, text-shadow 0.12s ease, opacity 0.12s ease;
}
.csl-lyr .word:last-child { margin-right: 0; }
.csl-lyr .word.past { color: #8b94a3; }
.csl-lyr .word.active {
    color: var(--csl-lyr-accent);
    font-weight: 800;
    text-shadow: 0 0 14px color-mix(in srgb, var(--csl-lyr-accent) 60%, transparent);
}
.csl-lyr:not(.reduced) .word.active { transform: scale(1.08); }

/* melodized 🎵 — colour emoji ignores color, so opacity+filter carries state */
.csl-lyr .word.note { opacity: 0.45; filter: grayscale(1) brightness(0.85); }
.csl-lyr .word.note.past { opacity: 0.75; filter: grayscale(0.5); }
.csl-lyr .word.note.active { opacity: 1; filter: drop-shadow(0 0 10px var(--csl-lyr-accent)); }
.csl-lyr .csl-lyr-line.melody { letter-spacing: 0.02em; }

/* ══════════════════════════════════════════════════════════════
   CLASSIC — one line, huge, centered (the lyric-video look)
   Unmistakable: big type, faint future / bright past / popping active
   ══════════════════════════════════════════════════════════════ */
.csl-lyr.line-mode {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    min-height: 3.6em;
    padding: 0.6em 1em;
    overflow: hidden;
}
.csl-lyr.line-mode .csl-lyr-line {
    display: none;
    font-size: clamp(1.35rem, 4vw, 2.35rem);
    font-weight: 800;
    line-height: 1.25;
    max-width: 92%;
    letter-spacing: -0.015em;
}
.csl-lyr.line-mode .csl-lyr-line.active { display: block; animation: csl-classic-in 0.22s cubic-bezier(0.19,1,0.22,1); }
.csl-lyr.line-mode .word { font-weight: 700; }
.csl-lyr.line-mode .word.active { transform: scale(1.12); text-shadow: 0 0 18px color-mix(in srgb, var(--csl-lyr-accent) 70%, transparent), 0 2px 10px rgba(0,0,0,0.6); }
@keyframes csl-classic-in { from { opacity: 0; transform: translateY(14px) scale(0.97); } to { opacity: 1; transform: translateY(0) scale(1); } }

/* ══════════════════════════════════════════════════════════════
   SINGLE — one GIANT word at a time, centered spotlight
   Unmistakable: only the current word exists, huge, pops in.
   Previous/next are gone (not faded — gone). Feels like TikTok karaoke.
   ══════════════════════════════════════════════════════════════ */
.csl-lyr.compact-mode {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    min-height: 4.8em;
    padding: 0.5em 0.8em 0.6em;
    overflow: hidden;
}
.csl-lyr.compact-mode .csl-lyr-line {
    display: none;
    width: 100%;
    justify-content: center;
    align-items: center;
    gap: 0;
}
.csl-lyr.compact-mode .csl-lyr-line.active { display: flex; animation: csl-single-line 0.18s ease-out; }
@keyframes csl-single-line { from { opacity: 0; } to { opacity: 1; } }
.csl-lyr.compact-mode .word {
    display: none; /* only active shows — JS toggles .single-hidden */
    margin: 0;
    font-family: 'Space Grotesk', 'Inter', sans-serif;
    font-size: clamp(2.4rem, 9vw, 4.6rem);
    font-weight: 900;
    line-height: 1;
    letter-spacing: -0.04em;
    text-transform: uppercase;
    filter: drop-shadow(0 3px 0 rgba(0,0,0,0.85)) drop-shadow(0 0 22px color-mix(in srgb, var(--csl-lyr-accent) 45%, transparent));
}
.csl-lyr.compact-mode .word.active {
    display: inline-block;
    color: #fff;
    animation: csl-single-pop 0.42s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    transform: none; /* pop handles scale */
}
.csl-lyr.compact-mode .word.past,
.csl-lyr.compact-mode .word.single-hidden { display: none !important; }
.csl-lyr.compact-mode .word.note {
    font-size: clamp(2.8rem, 10vw, 5.2rem);
    filter: drop-shadow(0 3px 0 rgba(0,0,0,0.9)) drop-shadow(0 0 24px var(--csl-lyr-accent));
}
@keyframes csl-single-pop {
    0% { opacity: 0; transform: scale(0.45) translateY(18px) rotate(-1deg); }
    55% { opacity: 1; transform: scale(1.18) translateY(-6px) rotate(0.6deg); }
    100% { opacity: 1; transform: scale(1) translateY(0) rotate(0); }
}
/* tiny counter under the giant word: "3 / 9" — shows there's a line underneath */
.csl-lyr.compact-mode .csl-lyr-line.active::after {
    content: '';
    position: absolute;
    bottom: 0.25em;
    left: 50%;
    transform: translateX(-50%);
    width: 3em;
    height: 3px;
    border-radius: 3px;
    background: linear-gradient(90deg, transparent, var(--csl-lyr-accent), transparent);
    opacity: 0.9;
    box-shadow: 0 0 10px var(--csl-lyr-accent);
}

/* ══════════════════════════════════════════════════════════════
   WAVE — horizontal flowing line where the active word is the crest
   Unmistakable: many words visible, active lifts + glows, neighbors
   are stepped like a sine wave; line drifts slightly.
   ══════════════════════════════════════════════════════════════ */
.csl-lyr.ticker-mode {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    min-height: 3.1em;
    padding: 0.55em 0.6em 0.7em;
    overflow: hidden;
}
.csl-lyr.ticker-mode .csl-lyr-line {
    display: none;
    font-family: 'Inter', system-ui, sans-serif;
    font-size: clamp(0.95rem, 2.6vw, 1.35rem);
    font-weight: 700;
    line-height: 1.2;
    max-width: 94%;
    gap: 0.02em;
}
.csl-lyr.ticker-mode .csl-lyr-line.active {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: baseline;
    gap: 0.32em 0.34em;
    animation: csl-wave-in 0.2s ease-out;
}
@keyframes csl-wave-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
.csl-lyr.ticker-mode .word {
    margin: 0;
    opacity: 0.22;
    transform: translateY(4px) scale(0.88);
    transition: opacity 0.16s ease, transform 0.18s cubic-bezier(0.19,1,0.22,1), color 0.1s linear, text-shadow 0.14s ease;
}
.csl-lyr.ticker-mode .word.ticker-hidden { display: none !important; }
.csl-lyr.ticker-mode .word.ticker-dim {
    opacity: 0.62;
    color: #aab4c4;
    transform: translateY(1px) scale(0.94);
}
.csl-lyr.ticker-mode .word.active {
    opacity: 1;
    color: var(--csl-lyr-accent);
    transform: translateY(-7px) scale(1.22);
    text-shadow: 0 0 16px color-mix(in srgb, var(--csl-lyr-accent) 65%, transparent), 0 4px 10px rgba(0,0,0,0.5);
}
/* underline crest — the wave trough that travels with the active word */
.csl-lyr.ticker-mode .word.active::after {
    content: '';
    position: absolute;
    left: -2px; right: -2px; bottom: -4px; height: 3px;
    border-radius: 3px;
    background: linear-gradient(90deg, transparent, var(--csl-lyr-accent) 20%, #fff 50%, var(--csl-lyr-accent) 80%, transparent);
    box-shadow: 0 0 10px var(--csl-lyr-accent);
    animation: csl-wave-crest 0.6s ease-out;
}
@keyframes csl-wave-crest { from { transform: scaleX(0.3); opacity: 0; } to { transform: scaleX(1); opacity: 1; } }

/* ══════════════════════════════════════════════════════════════
   STACK — 3 lines visible at once, vertical cascade
   Unmistakable: you always see prev + active + next. Active is
   big/bright/centered, neighbors are small/dim above & below.
   Distant lines are hidden (display:none via .stack-hidden).
   Feels like a teleprompter / Apple Music scroller.
   Fix 2026-09-23: was broken — JS marked ALL past lines .past so
   every prior line stacked visibly and overflowed the 5em box.
   Now JS marks only immediate neighbors; rest get .stack-hidden.
   ══════════════════════════════════════════════════════════════ */
.csl-lyr.caption-mode {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: stretch;
    text-align: center;
    min-height: 6.2em;
    max-height: 7.8em;
    padding: 0.32em 0.7em;
    gap: 0.12em;
    overflow: hidden;
}
.csl-lyr.caption-mode .csl-lyr-line {
    display: none; /* JS reveals only active ±1 */
    max-width: 92%;
    margin: 0 auto;
    padding: 0.14em 0;
    font-size: clamp(0.72rem, 1.7vw, 0.88rem);
    font-weight: 600;
    line-height: 1.25;
    letter-spacing: 0.01em;
    transition: opacity 0.22s ease, transform 0.22s cubic-bezier(0.19,1,0.22,1), font-size 0.22s ease, filter 0.22s ease;
    pointer-events: none;
}
.csl-lyr.caption-mode .csl-lyr-line.stack-hidden { display: none !important; }
.csl-lyr.caption-mode .csl-lyr-line.stack-prev,
.csl-lyr.caption-mode .csl-lyr-line.stack-next {
    display: block;
    opacity: 0.42;
    transform: scale(0.88);
    font-size: clamp(0.68rem, 1.55vw, 0.8rem);
    font-weight: 600;
    color: #8b94a3;
    filter: none;
}
.csl-lyr.caption-mode .csl-lyr-line.stack-prev { transform: scale(0.88) translateY(2px); }
.csl-lyr.caption-mode .csl-lyr-line.stack-next { transform: scale(0.88) translateY(-2px); }
.csl-lyr.caption-mode .csl-lyr-line.active {
    display: block;
    opacity: 1;
    transform: scale(1) translateY(0);
    font-size: clamp(1.02rem, 2.35vw, 1.28rem);
    font-weight: 800;
    color: #e2e8f0;
    letter-spacing: -0.01em;
    padding: 0.18em 0 0.18em 0.55em;
    border-left: 3px solid var(--csl-lyr-accent);
    box-shadow: inset 3px 0 12px -6px color-mix(in srgb, var(--csl-lyr-accent) 50%, transparent);
    filter: none;
}
.csl-lyr.caption-mode .csl-lyr-line.active .word { color: #cbd5e1; }
.csl-lyr.caption-mode .csl-lyr-line.active .word.past { color: #94a3b8; }
.csl-lyr.caption-mode .csl-lyr-line.active .word.active {
    color: var(--csl-lyr-accent);
    transform: none;
    text-shadow: 0 0 12px color-mix(in srgb, var(--csl-lyr-accent) 55%, transparent);
}

/* generic entrance (used by line-mode fallback) */
@keyframes csl-lyr-in { from { opacity: 0; transform: translateY(0.35em); } to { opacity: 1; transform: translateY(0); } }

/* scroll-mode (kept for dashboard, not in pill — hidden unless explicitly requested) */
.csl-lyr.scroll-mode { max-height: 60vh; overflow-y: auto; padding: 1em 1.2em; scrollbar-width: thin; }
.csl-lyr.scroll-mode .csl-lyr-line { font-size: clamp(1rem, 2vw, 1.3rem); font-weight: 600; line-height: 1.5; margin: 0.45em 0; opacity: 0.45; transition: opacity 0.15s ease; }
.csl-lyr.scroll-mode .csl-lyr-line.active { opacity: 1; }
.csl-lyr.scroll-mode .csl-lyr-line.past { opacity: 0.72; }

/* ── VIDEO OVERLAY placement — each mode lands differently so the TV feels different ── */
.csl-lyr.video-overlay {
    position: absolute;
    z-index: 5;
    pointer-events: none;
    text-shadow: 0 2px 8px rgba(0,0,0,0.8);
}
.csl-lyr.video-overlay.line-mode {
    inset: auto 0 8% 0;
    background: none;   /* 2026-09-25 Operator: no scrim — video must show through */
    padding: 1.2em 1em 0.6em;
}
.csl-lyr.video-overlay.compact-mode {
    inset: 0 0 0 0; /* SINGLE covers the whole TV like a spotlight — not stuck to the bottom */
    display: flex;
    background: none;   /* 2026-09-25 Operator: dark spotlight gone */
    padding: 0;
}
.csl-lyr.video-overlay.ticker-mode {
    inset: auto 0 7% 0;
    background: none;   /* 2026-09-25 Operator: no scrim */
    padding: 0.5em 0.85em 0.65em;
}
.csl-lyr.video-overlay.caption-mode {
    inset: auto 2% 3% 2%;
    background: none;   /* 2026-09-25 Operator: dark box gone — words float on the video */
    border: none;
    box-shadow: none;
    padding: 0.32em 0.55em;
}

/* reduced motion */
@media (prefers-reduced-motion: reduce) {
    .csl-lyr .word { transition: color 0.09s linear; }
    .csl-lyr .word.active { transform: none; }
    .csl-lyr.line-mode .csl-lyr-line.active,
    .csl-lyr.compact-mode .word.active,
    .csl-lyr.ticker-mode .word.active,
    .csl-lyr.caption-mode .csl-lyr-line.active { animation: none; }
}
.csl-lyr .csl-lyr-line.orphan { font-style: italic; opacity: 0.8; }
.csl-lyr.line-mode .csl-lyr-line.orphan.active,
.csl-lyr.compact-mode .csl-lyr-line.orphan.active,
.csl-lyr.ticker-mode .csl-lyr-line.orphan.active { opacity: 1; }

/* ── LYRIC STYLE SWITCHER (vault CRT + portfolio) ── */
.csl-lyric-switch {
    display: inline-flex;
    align-items: center;
    gap: 0;
    border: 1px solid rgba(255,255,255,0.14);
    background: rgba(8,10,16,0.72);
    backdrop-filter: blur(6px);
    border-radius: 999px;
    padding: 2px;
    font-family: 'Inter', system-ui, sans-serif;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.04em;
    box-shadow: 0 2px 10px rgba(0,0,0,0.35);
    user-select: none;
    pointer-events: auto;
}
.csl-lyric-switch button {
    appearance: none;
    border: 0;
    background: transparent;
    color: #8b94a3;
    padding: 5px 9px;
    border-radius: 999px;
    cursor: pointer;
    font: inherit;
    letter-spacing: inherit;
    transition: background 0.14s ease, color 0.14s ease, transform 0.14s ease;
    white-space: nowrap;
}
.csl-lyric-switch button:hover { color: #cbd5e1; }
.csl-lyric-switch button.active {
    background: var(--csl-lyr-accent, #ff2bd6);
    color: #fff;
    box-shadow: 0 1px 6px color-mix(in srgb, var(--csl-lyr-accent, #ff2bd6) 55%, transparent);
    transform: scale(1.02);
}
.csl-lyric-switch.vault {
    position: absolute;
    right: 2.2%;
    bottom: calc(37% - 98px);
    z-index: 63;
}
.csl-lyric-switch.portfolio { margin: 0.5em auto 0; }
.csl-lyric-switch .csl-lyric-switch-label { color: #6b7280; padding: 0 6px 0 8px; font-weight: 600; letter-spacing: 0.06em; }
@media (max-width: 700px) {
    .csl-lyric-switch { font-size: 9px; }
    .csl-lyric-switch button { padding: 4px 7px; }
    .csl-lyric-switch.vault { bottom: calc(37% - 88px); right: 1.5%; }
}