/* Playback: the Play button, the service mark, and the picker's
   album rows. Its own file so the music surfaces can change without touching the 5,000-line site
   sheet other work is happening in. Every value here uses the site's tokens. */

:root {
    --service-mark-size: 26px;      /* the mark on a pill button: the roundel's lettering needs 26 px to read at 1x */
    --play-button-height: 40px;
    /* The roundel sits concentric with the pill's rounded end: (height - mark) / 2. */
    --play-button-inset: calc((var(--play-button-height) - var(--service-mark-size)) / 2);
}

/* ── Service marks ─────────────────────────────────────────────────────────────────────────────
   Generated white-on-transparent PNGs (scratchpad/generate-icons.cs), used as a MASK so one image
   serves every ink: the mark takes the text colour of whatever it sits in. */

.service-mark {
    display: inline-block;
    flex-shrink: 0;
    width: var(--service-mark-size);
    height: var(--service-mark-size);
    background-color: currentColor;
    -webkit-mask: center / contain no-repeat;
    mask: center / contain no-repeat;
}

.service-mark--roon {
    -webkit-mask-image: url('../img/marks/ic-roon.png');
    mask-image: url('../img/marks/ic-roon.png');
}

/* ── The Play button on an album ───────────────────────────────────────────────────────────────
   Roon wears the app's own accent — it is the house's player. */

.play-album-button {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: var(--play-button-height);
    padding: 0 18px 0 var(--play-button-inset);
    border: none;
    border-radius: 999px;
    font-weight: 600;
    font-size: 0.8125rem;
    color: #fff;
    cursor: pointer;
    transition: transform 120ms ease, box-shadow 160ms ease, background 160ms ease, opacity 160ms ease;
    width: auto;
    max-width: fit-content;
}

.play-album-button--roon {
    background: linear-gradient(145deg, var(--accent-light), var(--accent));
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.35);
}

.play-album-button--roon:hover {
    background: linear-gradient(145deg, #B98D74, var(--accent-light));
}

.play-album-button:hover {
    transform: scale(1.04);
}

.play-album-button:active {
    transform: scale(0.97);
}

/* Pressed and waiting for the house: visibly busy within one frame, and not pressable twice — a
   second press while the first is still walking Roon's menus is how a browse cursor gets wedged. */
.play-album-button.is-busy {
    opacity: 0.75;
    cursor: progress;
    transform: none;
}

.play-album-button.is-busy .service-mark {
    animation: service-mark-pulse 1.1s ease-in-out infinite;
}

@keyframes service-mark-pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.35; }
}

/* What came of the press, in words, right under the button. */
.play-status {
    margin: 8px 0 0;
    min-height: 1.2em;
    font-size: 0.8rem;
    color: var(--text-muted);
}

.play-status.is-error {
    color: #E8A48C;
}

/* "Plays in Living Room · Change": a text button, so where it plays is changed in one tap. */
.play-status__change {
    padding: 0;
    border: none;
    background: none;
    font: inherit;
    font-weight: 600;
    color: var(--accent-light);
    cursor: pointer;
}

.play-status__change:hover {
    text-decoration: underline;
}

/* ── The picker ────────────────────────────────────────────────────────────────────────────────
   A heading so the same panel can say "Choose a room" or "Which one?", and album rows that show
   Roon's own sleeve for each candidate. */

.device-picker__heading {
    margin: 6px 8px 8px;
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--text-muted);
}

.device-picker__heading:empty {
    display: none;
}

/* Roon's details are sentences ("Playing Kind of Blue") and album artists — never capitalised. */
.device-picker__type {
    text-transform: none;
}

.device-picker__art {
    width: 44px;
    height: 44px;
    flex-shrink: 0;
    border-radius: 6px;
    object-fit: cover;
    background: rgba(255, 255, 255, 0.06);
}

/* ── The player bar, where a service cannot do something ───────────────────────────────────── */

/* Roon here has no seek: the line still shows progress but is plainly not a control. */
.player-bar__seek.is-readonly {
    cursor: default;
}

.player-bar__seek.is-readonly:hover {
    height: 3px;
}

.player-bar__seek.is-readonly .player-bar__seek-knob {
    display: none;
}

/* Roon says when next/previous mean nothing (a radio stream has no previous track). */
.player-bar__button:disabled {
    opacity: 0.35;
    cursor: default;
    transform: none;
    background: transparent;
}

/* ── The tracks of what is playing (Roon) ──────────────────────────────────────────────────────
   While this album plays in a room, the track panel lists Roon's tracks for the version that is on,
   and each row is a button: press to play the album from there. The rows are the catalogue's rows
   (.track-item) made pressable — same grid, same spacing, same "is-playing" mark — so the panel does
   not change shape when it switches source. */

.track-list-panel__source {
    order: 3;
    font-size: 0.8rem;
    color: var(--accent-light);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
}

.track-item--press {
    width: 100%;
    border: none;
    color: inherit;
    font: inherit;
    text-align: left;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}

.track-item--press:active {
    background: var(--accent-soft);
}

.track-item--press:focus-visible {
    outline: 2px solid var(--accent-light);
    outline-offset: 1px;
}

/* Pressed, and waiting for the room to confirm: the row is already marked (position is intent) and
   breathes until Roon answers. */
.track-item--press.is-starting {
    animation: trackStarting 1s ease-in-out infinite alternate;
}

@keyframes trackStarting {
    from { opacity: 1; }
    to { opacity: 0.55; }
}

@media (prefers-reduced-motion: reduce) {
    .track-item--press.is-starting {
        animation: none;
        opacity: 0.7;
    }
}