/* =========================================================
   player.css — Lookup in-app Apple Music preview player.
   Loaded on the Lookup page only (after cards.css). Covers the
   per-card play button, the fixed right-rail player, and the
   sidebar now-playing cover. Mobile (<900px) docks the player to
   the bottom of the screen as a minimized bar.
   ========================================================= */

/* ---- Play button in the card's format row ---- */

/* The format row becomes a flex line: format text left, play button right.
   (cards.css sets its colour / margin-top:auto; we only add the layout.) */
.match-card-format {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    min-width: 0;
}

.match-card-format-label {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* List cards have no format row, so the play button rides the for-sale row.
   Lay it out like the format row: for-sale text left (truncating), button right.
   On lookup the only for-sale rows are list cards, which all host the button. */
.match-card-forsale {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    min-width: 0;
}

.match-card-forsale-label {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* No for-sale info: the field exists only to anchor the button, so drop the
   link affordance it would otherwise carry. */
.match-card-forsale--empty { text-decoration: none; }
.match-card-forsale--empty:hover { color: var(--olive); }

/* The play button sits flush against the card's right edge and scales up on
   hover, so the card's (and body's) overflow:hidden would clip its right side.
   Let it bleed past the edge horizontally. The body keeps its vertical clip
   (overflow-y: clip) so the collapse animation is unaffected. */
.match-card { overflow: visible; }
.match-card-body { overflow-x: visible; overflow-y: clip; }

.match-card-play {
    position: relative;
    flex-shrink: 0;
    /* Match the height of the format text line beside it. */
    width: 1.35em;
    height: 1.35em;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: none;
    border-radius: 50%;
    background: var(--rust);
    color: var(--paper);
    cursor: pointer;
    transition: transform 0.12s ease, background 0.12s ease, opacity 0.12s ease;
}

.match-card-play svg {
    width: 0.8em;
    height: 0.8em;
    margin-left: 0.05em; /* optically centre the play triangle */
}

.match-card-play:hover { transform: scale(1.08); }
.match-card-play:disabled { cursor: default; }
.match-card-play--active { background: var(--amber); }

/* Loading: hide the triangle, spin a ring in its place. */
.match-card-play--loading svg { opacity: 0; }
.match-card-play--loading::after {
    content: "";
    position: absolute;
    width: 0.65em;
    height: 0.65em;
    border: 2px solid color-mix(in srgb, var(--paper) 45%, transparent);
    border-top-color: var(--paper);
    border-radius: 50%;
    animation: rotate 0.7s linear infinite;
}

/* The main content keeps its original size — the player is NOT given a reserved
   gutter (which would shrink the content). Instead player.js measures the
   leftover whitespace to the right of the content when play is clicked and sizes
   the rail to fit it, so only the player's width changes, never the content. */

/* ---- Sidebar now-playing cover (replaces the spinning platter) ---- */

.sidebar-nowplaying {
    position: absolute;
    width: 74px;
    height: 74px;
    top: 15px;
    left: 72px;
    object-fit: cover;
    border-radius: 4px;
    box-shadow: var(--shadow-pop);
    /* Out state: slid to the left and faded out. The cover sits on top of the
       platter, so it's revealed/hidden by sliding rather than by removing the
       platter. pointer-events follow the visible state, so the platter beneath
       (the PDF-export button) is only blocked while a cover is actually shown. */
    opacity: 0;
    transform: translateX(-24px);
    pointer-events: none;
    transition: opacity 0.3s ease, transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.sidebar-nowplaying--in {
    opacity: 1;
    transform: translateX(0);
    pointer-events: auto;
    cursor: pointer;   /* click the cover to close the player (slides it out) */
}

/* ---- Fixed right-rail player ---- */

/* Invisible, viewport-fixed placeholder — no chrome of its own; only the inner
   card is visible. Floats over the top-right of the content (the main layout is
   left unchanged), and stays put on scroll. Above the sidebar (z-index 100). */
.player-rail {
    position: fixed;
    top: 0;
    right: 16px;            /* fallback anchor; JS positions it beside the content */
    width: 320px;           /* fallback; JS sets the real width to fit the gap */
    max-width: calc(100vw - 32px);
    z-index: 200;
}

.player-rail[hidden] { display: none; }

.player-rail-card {
    background: var(--paper);
    border: 1px solid var(--rule-strong);
    border-radius: 12px;
    box-shadow: var(--shadow-pop);
    overflow: hidden;
    opacity: 0;
    transform: translateY(-8px);
    transition: opacity 0.2s ease, transform 0.2s ease;
}

.player-rail--open .player-rail-card {
    opacity: 1;
    transform: none;
}

.player-rail-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 8px 8px 8px 12px;
    border-bottom: 1px solid var(--rule);
}

.player-rail-label {
    min-width: 0;
    font-size: 12px;
    font-weight: 600;
    color: var(--ink-soft);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.player-rail-close {
    flex-shrink: 0;
    width: 24px;
    height: 24px;
    padding: 0;
    border: none;
    background: none;
    color: var(--ink-muted);
    font-size: 20px;
    line-height: 1;
    cursor: pointer;
    border-radius: 6px;
    transition: background 0.12s ease, color 0.12s ease;
}

.player-rail-close:hover {
    background: color-mix(in srgb, var(--ink) 8%, var(--paper));
    color: var(--ink);
}

.player-rail-frame iframe {
    display: block;
    width: 100%;
    height: 450px;
    border: 0;
}

/* Shown in place of the player when a release isn't on Apple Music. */
.player-rail-message {
    padding: 28px 20px;
    text-align: center;
    font-size: 13px;
    line-height: 1.5;
    color: var(--ink-soft);
}

/* ---- Docked player: a minimized bar at the bottom of the screen ----
   Applied by player.js (.player-rail--docked) below 900px, and on wider screens
   when the gap beside the content is too small to fit the player without
   overlapping it. */
.player-rail--docked {
    top: auto;
    right: 0;
    bottom: 0;
    left: 0;
    width: auto;
    max-width: none;
}
.player-rail--docked .player-rail-card {
    border-radius: 0;
    border-left: 0;
    border-right: 0;
    border-bottom: 0;
    transform: translateY(10px);
}
.player-rail--docked.player-rail--open .player-rail-card {
    transform: none;
}
/* Short iframe → Apple's embed renders its compact single-bar player. */
.player-rail--docked .player-rail-frame iframe {
    height: 96px;
}