/**
 * PianoMode Listen & Find
 * A compact "shuffle by ear" bar. Self contained so it can drop onto the Listen
 * page, the Home page, or a cluster page unchanged.
 *
 * Theming: the component carries its own small, theme aware palette (the --lf-*
 * set, same idea as --srt-* and --ph-*), so dark and light both look right on
 * any background without depending on a page level surface token. Brand gold
 * comes straight from the global --pm-gold* tokens. Surfaces are translucent, so
 * the bar settles onto whatever sits behind it.
 */

.pm-lf {
    /* Dark is the default palette. */
    --lf-bg:            rgba(255, 255, 255, .035);
    --lf-bg-2:          rgba(255, 255, 255, .06);
    --lf-bg-hover:      var(--pm-gold-a08, rgba(215, 191, 129, .08));
    --lf-text:          #F5EFE3;
    --lf-text-soft:     rgba(245, 239, 227, .60);
    --lf-border:        var(--pm-gold-a15, rgba(215, 191, 129, .15));
    --lf-border-strong: var(--pm-gold-a35, rgba(215, 191, 129, .35));
    --lf-accent:        var(--pm-gold, #D7BF81);
    --lf-on-gold:       #1B1813;
    --lf-track:         rgba(255, 255, 255, .08);

    box-sizing: border-box;
    width: 100%;
    margin: 0 0 18px;
    padding: 10px 14px 0;
    background: var(--lf-bg);
    border: 1px solid var(--lf-border);
    border-radius: 16px;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    overflow: hidden;
    transition: border-color var(--pm-dur, 240ms) var(--pm-ease, ease);
}
.pm-lf * { box-sizing: border-box; }

.pm-lf.is-playing { border-color: var(--lf-border-strong); }

/* Light theme: deeper gold for contrast on the paper palette, dark ink text. */
html[data-theme="light"] .pm-lf {
    --lf-bg:            rgba(160, 137, 74, .06);
    --lf-bg-2:          rgba(160, 137, 74, .10);
    --lf-bg-hover:      rgba(160, 137, 74, .12);
    --lf-text:          #1B1813;
    --lf-text-soft:     rgba(27, 24, 19, .58);
    --lf-border:        rgba(160, 137, 74, .30);
    --lf-border-strong: rgba(160, 137, 74, .55);
    --lf-accent:        var(--pm-gold-deep, #A0894A);
    --lf-track:         rgba(27, 24, 19, .10);
}

/* ── Main row ─────────────────────────────────────────────────────────── */
.pm-lf__main {
    display: flex;
    align-items: center;
    gap: 14px;
    padding-bottom: 10px;
}

/* Play / pause / loading button (the gold lead control). */
.pm-lf__play {
    position: relative;
    flex: 0 0 auto;
    width: 50px;
    height: 50px;
    border: none;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--lf-on-gold);
    background: linear-gradient(135deg,
        var(--pm-gold-bright, #E6D4A8) 0%,
        var(--pm-gold, #D7BF81) 45%,
        var(--pm-gold-dark, #BEA86E) 100%);
    box-shadow: 0 4px 16px var(--pm-gold-a25, rgba(215, 191, 129, .25));
    transition: transform var(--pm-dur, 240ms) var(--pm-ease, ease),
                box-shadow var(--pm-dur, 240ms) var(--pm-ease, ease);
}
.pm-lf__play:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 26px var(--pm-gold-a35, rgba(215, 191, 129, .35));
}
.pm-lf__play:active { transform: translateY(0); }
.pm-lf__play:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px var(--pm-gold-a35, rgba(215, 191, 129, .35));
}

.pm-lf__ic { display: block; }
.pm-lf__ic--pause { display: none; }
.pm-lf.is-playing .pm-lf__ic--play  { display: none; }
.pm-lf.is-playing .pm-lf__ic--pause { display: block; }
/* While the sampler loads, hide both glyphs and show the spinner. */
.pm-lf.is-loading .pm-lf__ic { display: none; }

.pm-lf__spinner {
    display: none;
    position: absolute;
    width: 22px;
    height: 22px;
    border: 2.5px solid rgba(27, 24, 19, .25);
    border-top-color: var(--lf-on-gold);
    border-radius: 50%;
    animation: pm-lf-spin .7s linear infinite;
}
.pm-lf.is-loading .pm-lf__spinner { display: block; }
@keyframes pm-lf-spin { to { transform: rotate(360deg); } }

/* ── Text column ──────────────────────────────────────────────────────── */
.pm-lf__body {
    flex: 1 1 auto;
    min-width: 0;
}

.pm-lf__eyebrow {
    display: flex;
    align-items: center;
    gap: 7px;
    font-family: var(--pm-font, 'Montserrat', sans-serif);
    font-size: .68rem;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--lf-accent);
    margin-bottom: 3px;
}
.pm-lf__eyebrow svg { flex: 0 0 auto; }
.pm-lf__hint {
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: none;
    color: var(--lf-text-soft);
    font-size: .66rem;
}
.pm-lf__hint::before { content: "·"; margin: 0 6px 0 2px; color: var(--lf-text-soft); }

.pm-lf__now {
    display: flex;
    align-items: center;
    min-height: 24px;
    font-family: var(--pm-font, 'Montserrat', sans-serif);
}

.pm-lf__idle {
    font-size: .9rem;
    color: var(--lf-text-soft);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* The now playing link: waveform, title, then the call to action. */
.pm-lf__link {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
    max-width: 100%;
    text-decoration: none;
    color: var(--lf-text);
}
.pm-lf__track {
    font-size: .98rem;
    font-weight: 700;
    color: var(--lf-text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
    transition: color var(--pm-dur, 240ms) var(--pm-ease, ease);
}
.pm-lf__link:hover .pm-lf__track { color: var(--lf-accent); }

.pm-lf__cta {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    flex: 0 0 auto;
    font-size: .76rem;
    font-weight: 700;
    color: var(--lf-accent);
    white-space: nowrap;
}
.pm-lf__cta svg { transition: transform var(--pm-dur, 240ms) var(--pm-ease, ease); }
.pm-lf__link:hover .pm-lf__cta svg { transform: translateX(3px); }

/* The little equalizer bars next to the title while a piece plays. */
.pm-lf__playing {
    display: none;
    align-items: flex-end;
    gap: 2px;
    width: 16px;
    height: 14px;
    flex: 0 0 auto;
}
.pm-lf.is-playing .pm-lf__playing { display: inline-flex; }
.pm-lf__playing span {
    flex: 1;
    background: var(--lf-accent);
    border-radius: 1px;
    height: 30%;
    animation: pm-lf-eq 1s ease-in-out infinite;
}
.pm-lf__playing span:nth-child(2) { animation-delay: .25s; }
.pm-lf__playing span:nth-child(3) { animation-delay: .5s; }
@keyframes pm-lf-eq {
    0%, 100% { height: 25%; }
    50%      { height: 100%; }
}

/* ── Next button ──────────────────────────────────────────────────────── */
.pm-lf__next {
    flex: 0 0 auto;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    border: 1px solid var(--lf-border);
    background: var(--lf-bg-2);
    color: var(--lf-text);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background var(--pm-dur, 240ms) var(--pm-ease, ease),
                border-color var(--pm-dur, 240ms) var(--pm-ease, ease),
                color var(--pm-dur, 240ms) var(--pm-ease, ease);
}
.pm-lf__next:hover {
    background: var(--lf-bg-hover);
    border-color: var(--lf-border-strong);
    color: var(--lf-accent);
}
.pm-lf__next:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px var(--pm-gold-a35, rgba(215, 191, 129, .35));
}

/* ── Progress bar (sits on the bottom edge of the bar) ────────────────── */
.pm-lf__progress {
    height: 3px;
    width: 100%;
    background: var(--lf-track);
    border-radius: 3px;
    overflow: hidden;
}
.pm-lf__bar {
    display: block;
    height: 100%;
    width: 0;
    background: linear-gradient(90deg,
        var(--pm-gold-dark, #BEA86E),
        var(--pm-gold, #D7BF81),
        var(--pm-gold-bright, #E6D4A8));
    border-radius: 3px;
    transition: width .2s linear;
}

/* ── Mobile ───────────────────────────────────────────────────────────── */
@media (max-width: 600px) {
    .pm-lf { padding: 9px 11px 0; }
    .pm-lf__main { gap: 11px; }
    .pm-lf__play { width: 44px; height: 44px; }
    .pm-lf__track { font-size: .92rem; }
    /* Drop the call to action label on the smallest screens; the whole row
       stays tappable and the arrow alone signals it is a link. */
    .pm-lf__cta { font-size: 0; gap: 0; }
    .pm-lf__cta svg { width: 15px; height: 15px; }
}

/* ── Reduced motion ───────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
    .pm-lf__spinner { animation-duration: 1.4s; }
    .pm-lf__playing span { animation: none; height: 60%; }
    .pm-lf__bar { transition: none; }
    .pm-lf__play, .pm-lf__next, .pm-lf__cta svg, .pm-lf__track { transition: none; }
}