/*
    Studio audio player.

    A multi-track playlist for accounts whose work IS the audio: voiceover,
    composing, sound design. Every player before this one showed one track in
    one bar, which is right for an actor with a single reel and wrong for a VO
    artist with eight spots in four categories.

    Sized from its host, never assumed. The same player has to sit in a 300px
    sidebar and a full-width press kit row and is never told which, so every
    dimension here is relative or clamped and the waveform canvas is measured
    at mount and on resize.

    Colors come from --wfa-accent, set inline by the mount from the account's
    own accent. Everything else is neutral by design: this sits inside 98
    different designs and must not fight any of them.
*/

.wfa-studio {
    --wfa-accent: #c9713f;
    --wfa-ink: #1b1b1d;
    --wfa-ink-soft: #6a6a72;
    --wfa-line: rgba(0, 0, 0, .09);
    --wfa-surface: #fff;
    --wfa-row-hover: rgba(0, 0, 0, .035);

    box-sizing: border-box;
    width: 100%;
    max-width: 100%;
    background: var(--wfa-surface);
    border: 1px solid var(--wfa-line);
    border-radius: 14px;
    overflow: hidden;
    font-family: inherit;
    color: var(--wfa-ink);
    line-height: 1.4;
    text-align: left;
}

.wfa-studio *,
.wfa-studio *::before,
.wfa-studio *::after { box-sizing: border-box; }

/*  The design around this may have set a global button style. Reset only what
    would visibly break the player, not everything, so it still inherits the
    site's font.  */
.wfa-studio button {
    font: inherit;
    color: inherit;
    background: none;
    border: 0;
    margin: 0;
    padding: 0;
    cursor: pointer;
    text-align: left;
}

.wfa-studio button:focus-visible {
    outline: 2px solid var(--wfa-accent);
    outline-offset: 2px;
}

/* ------------------------------------------------------------- now playing */

.wfa-studio-now {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 16px 18px 14px;
}

.wfa-studio-art {
    flex: 0 0 auto;
    width: 54px;
    height: 54px;
    border-radius: 10px;
    object-fit: cover;
    display: block;
    background: rgba(0, 0, 0, .06);
}

.wfa-studio-meta { min-width: 0; flex: 1 1 auto; }

.wfa-studio-title {
    font-weight: 700;
    font-size: 15.5px;
    letter-spacing: -.01em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.wfa-studio-artist {
    font-size: 13px;
    color: var(--wfa-ink-soft);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-top: 2px;
}

/*  Tabular figures so the clock does not jitter as the digits change.  */
.wfa-studio-clock {
    flex: 0 0 auto;
    font-size: 12.5px;
    color: var(--wfa-ink-soft);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

/* ---------------------------------------------------------------- waveform */

.wfa-studio-wave {
    position: relative;
    height: 56px;
    margin: 0 18px;
    cursor: pointer;
    touch-action: none;
}

.wfa-studio-wave canvas {
    display: block;
    width: 100%;
    height: 100%;
}

/* ------------------------------------------------------------- transport */

.wfa-studio-bar {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 18px 16px;
}

.wfa-studio-play {
    flex: 0 0 auto;
    width: 46px;
    height: 46px;
    border-radius: 999px;
    background: var(--wfa-accent);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform .12s ease;
}

.wfa-studio-play:hover { transform: scale(1.05); }
.wfa-studio-play:active { transform: scale(.97); }
.wfa-studio-play svg { width: 18px; height: 18px; display: block; fill: currentColor; }

.wfa-studio-step {
    flex: 0 0 auto;
    width: 34px;
    height: 34px;
    border-radius: 999px;
    color: var(--wfa-ink-soft);
    display: flex;
    align-items: center;
    justify-content: center;
}

.wfa-studio-step:hover { color: var(--wfa-ink); background: var(--wfa-row-hover); }
.wfa-studio-step svg { width: 14px; height: 14px; display: block; fill: currentColor; }
.wfa-studio-step[disabled] { opacity: .3; cursor: default; }
.wfa-studio-step[disabled]:hover { background: none; color: var(--wfa-ink-soft); }

.wfa-studio-spacer { flex: 1 1 auto; }

.wfa-studio-count {
    font-size: 12px;
    color: var(--wfa-ink-soft);
    font-variant-numeric: tabular-nums;
}

/* ------------------------------------------------------------- track list */

.wfa-studio-list {
    border-top: 1px solid var(--wfa-line);
    max-height: 268px;
    overflow-y: auto;
    /*  A single track has nothing to list, and an empty scroll region with a
        border above it reads as a bug.  */
}

.wfa-studio-list[hidden] { display: none; }

.wfa-studio-track {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    padding: 10px 18px;
    border-bottom: 1px solid var(--wfa-line);
    transition: background .12s ease;
}

.wfa-studio-track:last-child { border-bottom: 0; }
.wfa-studio-track:hover { background: var(--wfa-row-hover); }

.wfa-studio-num {
    flex: 0 0 auto;
    width: 20px;
    font-size: 12px;
    color: var(--wfa-ink-soft);
    font-variant-numeric: tabular-nums;
    text-align: right;
}

/*  The bars that replace the number on the playing row. Animated only while
    actually playing, so a paused track does not dance.  */
.wfa-studio-eq {
    display: none;
    align-items: flex-end;
    gap: 2px;
    height: 13px;
}

.wfa-studio-eq i {
    display: block;
    width: 2.5px;
    background: var(--wfa-accent);
    border-radius: 1px;
    height: 30%;
}

.wfa-studio-track.is-current .wfa-studio-num { display: none; }
.wfa-studio-track.is-current .wfa-studio-eq { display: flex; }
.wfa-studio-track.is-current .wfa-studio-name { color: var(--wfa-accent); font-weight: 700; }

.wfa-studio-track.is-playing .wfa-studio-eq i { animation: wfa-studio-eq 900ms ease-in-out infinite; }
.wfa-studio-track.is-playing .wfa-studio-eq i:nth-child(2) { animation-delay: 160ms; }
.wfa-studio-track.is-playing .wfa-studio-eq i:nth-child(3) { animation-delay: 320ms; }

@keyframes wfa-studio-eq {
    0%, 100% { height: 28%; }
    50%      { height: 100%; }
}

.wfa-studio-name {
    flex: 1 1 auto;
    min-width: 0;
    font-size: 14px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.wfa-studio-tag {
    flex: 0 0 auto;
    font-size: 11px;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--wfa-ink-soft);
    border: 1px solid var(--wfa-line);
    border-radius: 999px;
    padding: 2px 8px;
}

.wfa-studio-dur {
    flex: 0 0 auto;
    font-size: 12.5px;
    color: var(--wfa-ink-soft);
    font-variant-numeric: tabular-nums;
}

/* --------------------------------------------------------------- narrow */

/*  Container query would be right here and is not safe enough yet across the
    designs this lands in, so the narrow layout is driven by a class the mount
    sets from the measured host width.  */
.wfa-studio.is-narrow .wfa-studio-now { padding: 14px 14px 10px; gap: 11px; }
.wfa-studio.is-narrow .wfa-studio-art { width: 44px; height: 44px; }
.wfa-studio.is-narrow .wfa-studio-wave { height: 40px; margin: 0 14px; }
.wfa-studio.is-narrow .wfa-studio-bar { padding: 10px 14px 13px; }
.wfa-studio.is-narrow .wfa-studio-track { padding: 9px 14px; }
.wfa-studio.is-narrow .wfa-studio-tag { display: none; }
.wfa-studio.is-narrow .wfa-studio-clock { display: none; }

@media (prefers-reduced-motion: reduce) {
    .wfa-studio-play { transition: none; }
    .wfa-studio-play:hover { transform: none; }
    .wfa-studio-track.is-playing .wfa-studio-eq i { animation: none; height: 60%; }
}