/* =================================================================
   album-detail.css — Sliding album detail panel.
   Panel chrome, header, cover, actions, search, track list,
   work-groups, per-track like + rating widgets, plus body-class
   overrides for rating visibility.
   ================================================================= */

.album-detail-panel {
    position: fixed;
    /* Anchored below the custom titlebar so the cover at the top of
       .detail-panel-content has clear room and isn't visually clipped
       by the 32px titlebar that sits above. Paired with the body-class
       override in custom-titlebar.css that sets --titlebar-height:0
       in tiny-player mode, so the panel reclaims full height there. */
    top: var(--titlebar-height, 32px);
    right: -450px;
    width: 450px;
    min-width: 300px;
    max-width: 700px;
    height: calc(100vh - var(--titlebar-height, 32px));
    background: var(--bg-sidebar);
    border-left: 1px solid var(--border-subtle);
    z-index: 500;
    overflow-y: auto;
    transition: right 0.2s ease;
}

.panel-resize-handle {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 8px;
    cursor: ew-resize;
    background: transparent;
    transition: background 0.2s;
    z-index: 10;
}

.panel-resize-handle:hover,
.panel-resize-handle.active {
    background: var(--accent-primary);
}

body.panel-resizing {
    cursor: ew-resize !important;
}

body.panel-resizing * {
    cursor: ew-resize !important;
}

.album-detail-panel.open {
    right: 0;
}

/* =====================================================================
   Music-player sidebar — slide-in panel on the LEFT edge. Hosts the
   now-playing hero + queue list (the same #right-panel-np contents
   that used to live inside .album-detail-panel). Independent open/
   close + resize from the right detail panel, so both can be visible
   at the same time.
   ===================================================================== */
.music-panel {
    position: fixed;
    top: var(--titlebar-height, 32px);   /* see .album-detail-panel */
    left: -450px;
    width: 450px;
    min-width: 320px;
    max-width: 700px;
    height: calc(100vh - var(--titlebar-height, 32px));
    background: var(--bg-sidebar);
    border-right: 1px solid var(--border-subtle);
    z-index: 500;
    overflow-y: auto;
    transition: left 0.2s ease;
}
.music-panel.open { left: 0; }

.music-panel-resize-handle {
    position: absolute;
    right: 0;
    top: 0;
    bottom: 0;
    width: 8px;
    cursor: ew-resize;
    background: transparent;
    transition: background 0.2s;
    z-index: 10;
}
.music-panel-resize-handle:hover,
.music-panel-resize-handle.active {
    background: var(--accent-primary);
}

/* When the music panel is open, the right-panel-np host fills it edge
   to edge — same surface area the queue hero used to get inside the
   album-detail panel, just on the other side. */
.music-panel .right-panel-np[hidden] { display: none; }
.music-panel .right-panel-np {
    height: 100%;
}

.detail-panel-content {
    padding: 18px 18px 24px;
}

/* Unified close-button look for both side panels — the album-detail
   panel on the right and the music-player panel on the left. Round,
   semi-transparent surface with an accent-coloured ×. The matching
   `.right-panel-np-close` rule in queue.css mirrors this declaration
   block, so updating one means updating both. */
.detail-close {
    position: absolute;
    top: 12px;
    right: 14px;
    z-index: 2;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: rgba(var(--surface-app-rgb), 0.55);
    border: 1px solid var(--border-subtle);
    color: var(--accent-primary);
    font-size: 22px;
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.detail-close:hover {
    background: rgba(var(--accent-primary-rgb), 0.18);
    border-color: var(--accent-primary);
    color: var(--accent-primary);
}

.detail-header {
    margin-bottom: 14px;
}

.detail-cover {
    width: 100%;
    aspect-ratio: 1;
    border-radius: 12px;
    margin-bottom: 12px;
}

.detail-title {
    font-size: 18px;
    line-height: 1.2;
    margin-bottom: 3px;
}

.detail-artist {
    color: var(--text-secondary);
    font-size: 13px;
    line-height: 1.25;
    margin-bottom: 8px;
}

/* Album overview tags (Composer, Conductor, Performer, Genre, Year, …).
   Laid out as small chips that wrap onto multiple lines instead of being
   crammed onto a single row. */
.detail-meta-items {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 6px;
    margin-bottom: 8px;
}

.detail-meta-items .meta-item {
    display: inline-flex;
    align-items: baseline;
    gap: 5px;
    padding: 3px 8px;
    background: var(--bg-card);
    border: 1px solid var(--border-subtle);
    border-radius: 999px;
    font-size: 11px;
    line-height: 1.35;
    color: var(--text-primary);
    max-width: 100%;
    word-break: break-word;
}

/* Clickable name inside a chip — jumps to that name in the matching
   entity grouped view. Looks like the surrounding chip text but with a
   subtle hover treatment so the user knows it's interactive. */
.detail-meta-items .meta-item .meta-chip-link {
    color: inherit;
    text-decoration: none;
    cursor: pointer;
    border-radius: 4px;
    padding: 0 1px;
    transition: color 0.12s ease, background 0.12s ease;
}
.detail-meta-items .meta-item .meta-chip-link:hover,
.detail-meta-items .meta-item .meta-chip-link:focus-visible {
    color: var(--accent-primary);
    background: color-mix(in srgb, var(--accent-primary) 12%, transparent);
    outline: none;
}

/* Heart marker rendered after a favourited chip-name. Tiny, accent-
   tinted, non-interactive — the surrounding link captures clicks and
   right-click toggles the favourite state. */
.detail-meta-items .meta-item .meta-chip-link-fav-mark {
    margin-left: 3px;
    font-size: 9px;
    line-height: 1;
    color: var(--state-danger, #f87171);
    opacity: 0.85;
    pointer-events: none;
}
.detail-meta-items .meta-item .meta-chip-link-fav .meta-chip-link-fav-mark {
    /* When the link itself is hovered, lift the heart's opacity in step
       with the surrounding accent so it doesn't read as faded out. */
    opacity: 1;
}

.detail-meta-items .meta-item strong {
    font-weight: 600;
    color: var(--text-secondary);
    font-size: 9px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.detail-meta {
    color: var(--text-muted);
    font-size: 12px;
    margin-bottom: 12px;
}

.detail-actions {
    display: flex;
    align-items: stretch;
    gap: 8px;
    margin-bottom: 10px;
    /* Establish a container so the per-button label-hide rule below can
      query the actions row's width and drop button labels when there's
      no horizontal room left. */
    container-type: inline-size;
    container-name: detail-actions;
}

/* Shared sizing for every button in the actions row — same height, same
   border-radius, same vertical paddings. The label/icon-only variants
   then differ only in width via flex / fixed dimensions. */
.detail-actions > button {
    height: 38px;
    border-radius: 19px;
    border: 1px solid var(--border-subtle);
    background: var(--bg-card);
    color: var(--text-secondary);
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 0 14px;
    transition: background 0.15s, color 0.15s, border-color 0.15s, transform 0.1s;
}

.detail-actions > button:hover {
    background: var(--bg-card-hover);
    color: var(--text-primary);
    border-color: rgba(var(--accent-primary-rgb), 0.45);
}

.detail-actions > button:active {
    transform: scale(0.97);
}

/* The icon span keeps the SVG centred inside the round button without
   inheriting the button's font-size baseline math. */
.detail-actions .detail-btn-icon,
.detail-actions .icon-svg {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
}

.detail-search {
    display: flex;
    align-items: center;
    gap: 8px;
    background: var(--bg-dark);
    border: 1px solid var(--border-subtle);
    border-radius: 8px;
    padding: 4px 10px;
    margin-bottom: 10px;
}

.detail-search:focus-within {
    border-color: var(--accent-primary);
    background: rgba(var(--accent-primary-rgb), 0.04);
}

.detail-search-icon {
    color: var(--text-muted);
    display: inline-flex;
    align-items: center;
}

.detail-search-input {
    flex: 1;
    background: transparent;
    border: none;
    outline: none;
    color: var(--text-primary);
    font: inherit;
    padding: 2px 0;
}

.detail-search-input::placeholder {
    color: var(--text-muted);
}

/* Collapse-all pill — sits at the right end of the in-album search row.
   Shown only when the album has foldable work / movement groups (set by
   _syncCollapseAllButton); flips between "Collapse all" and "Expand all". */
.detail-collapse-all {
    flex: 0 0 auto;
    padding: 4px 10px;
    border: 1px solid var(--border-subtle);
    border-radius: 7px;
    background: var(--bg-dark);
    color: var(--text-muted);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.01em;
    cursor: pointer;
    white-space: nowrap;
    transition: color 0.15s, border-color 0.15s, background 0.15s;
}

.detail-collapse-all:hover {
    color: var(--accent-primary);
    border-color: rgba(var(--accent-primary-rgb), 0.45);
    background: rgba(var(--accent-primary-rgb), 0.08);
}

.detail-collapse-all.is-expand {
    color: var(--accent-primary);
    border-color: rgba(var(--accent-primary-rgb), 0.35);
}

.detail-collapse-all[hidden] {
    display: none;
}

/* Grouped / Flat segmented toggle — full-width bar ABOVE the in-album
   search row, so it can never overflow a narrow sidebar panel. Two equal
   segments; the active one is highlighted (click to switch). */
.detail-view-toggle {
    display: flex;
    width: 100%;
    border: 1px solid var(--border-subtle);
    border-radius: 8px;
    overflow: hidden;
    background: var(--bg-dark);
    margin-bottom: 10px;
}

.detail-view-toggle-btn {
    flex: 1 1 0;
    min-width: 0;
    padding: 8px 10px;
    border: none;
    background: transparent;
    color: var(--text-muted);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.01em;
    text-align: center;
    cursor: pointer;
    white-space: nowrap;
    transition: color 0.15s, background 0.15s;
}

.detail-view-toggle-btn + .detail-view-toggle-btn {
    border-left: 1px solid var(--border-subtle);
}

.detail-view-toggle-btn:hover {
    color: var(--accent-primary);
    background: rgba(var(--accent-primary-rgb), 0.05);
}

.detail-view-toggle-btn.active {
    color: var(--accent-primary);
    background: rgba(var(--accent-primary-rgb), 0.10);
}

/* Hidden for albums with no work / movement-name tags (the toggle is
   pointless there — both views render the same list). */
.detail-view-toggle[hidden] {
    display: none;
}

/* Primary Play button — accent fill, label always visible if there's
   room (label-hide kicks in via container query below for narrow
   panels). flex:1 makes it absorb extra horizontal space so it stays
   the dominant action. */
.detail-actions .detail-play-btn {
    background: var(--accent-primary);
    border-color: var(--accent-primary);
    color: var(--text-on-accent);
    flex: 1 1 auto;
    min-width: 84px;
}

.detail-actions .detail-play-btn:hover {
    background: var(--accent-primary);
    color: var(--text-on-accent);
    filter: brightness(1.08);
    border-color: var(--accent-primary);
}

/* Read Booklet button — outlined accent ring, white SVG inside (no
   emoji). flex 0 1 auto so it keeps its label width when room allows
   but can shrink before the icon-only buttons below it. */
.detail-actions .detail-booklet-btn {
    background: rgba(var(--accent-primary-rgb), 0.06);
    border-color: rgba(var(--accent-primary-rgb), 0.45);
    color: var(--text-primary);
    flex: 0 1 auto;
    min-width: 0;
}

.detail-actions .detail-booklet-btn .icon-svg {
    color: var(--text-primary);
}

.detail-actions .detail-booklet-btn:hover {
    background: rgba(var(--accent-primary-rgb), 0.14);
    border-color: var(--accent-primary);
    color: var(--text-primary);
}

/* Icon-only round buttons (queue / playlist / like). Width matches
   height so they're perfectly circular at the shared 38 px height.
   No padding, no flex-grow — they're fixed-size badges. */
.detail-actions .detail-iconbtn {
    width: 38px;
    min-width: 38px;
    padding: 0;
    flex: 0 0 38px;
}

.detail-actions .detail-iconbtn:hover {
    color: var(--accent-primary);
}

/* Liked state for the heart — solid accent fill, accent border. */
.detail-actions .detail-like-btn.liked {
    color: var(--accent-primary);
    background: rgba(var(--accent-primary-rgb), 0.16);
    border-color: rgba(var(--accent-primary-rgb), 0.55);
}

.detail-actions .detail-like-btn.liked .icon-svg {
    fill: currentColor;
}

/* Container-query label drop — when the actions row is narrow enough
   that fitting the labels + icons would squash the icon buttons, hide
   the labels and let only the icons show. The Play button keeps its
   label longest because its flex:1 priority claims space first. */
@container detail-actions (max-width: 320px) {
    .detail-actions .detail-booklet-btn .detail-btn-label {
        display: none;
    }
    .detail-actions .detail-booklet-btn {
        width: 38px;
        min-width: 38px;
        padding: 0;
        flex: 0 0 38px;
    }
}

@container detail-actions (max-width: 240px) {
    .detail-actions .detail-play-btn .detail-btn-label {
        display: none;
    }
    .detail-actions .detail-play-btn {
        flex: 0 0 38px;
        width: 38px;
        min-width: 38px;
        padding: 0;
    }
}

.detail-addplaylist-btn:active {
    transform: scale(0.95);
}

.detail-booklet-btn {
    background: var(--bg-card);
    border: 1px solid rgba(var(--accent-secondary-rgb), 0.4);
    padding: 0 20px;
    height: 50px;
    border-radius: 25px;
    color: var(--accent-secondary);
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: background 0.15s ease, transform 0.1s ease;
}

.detail-booklet-btn:hover {
    background: rgba(var(--accent-secondary-rgb), 0.15);
    transform: translateY(-1px);
}

.detail-like-btn {
    width: 50px;
    height: 50px;
    background: var(--bg-card);
    border: none;
    border-radius: 50%;
    color: var(--text-secondary);
    font-size: 20px;
    cursor: pointer;
    transition: color 0.15s ease, background 0.15s ease, transform 0.1s ease;
}

.detail-like-btn:hover {
    background: var(--bg-card-hover);
}

.detail-like-btn.liked {
    color: var(--state-danger);
    background: rgba(var(--state-danger-rgb), 0.12);
}

.detail-like-btn.liked:hover {
    background: rgba(var(--state-danger-rgb), 0.2);
}

.detail-like-btn:active {
    transform: scale(0.95);
}

/* Rating-widget visibility toggles — driven by body classes set from the
   `showTrackRatings` and `showAlbumDetailRating` settings. `display: none`
   keeps the layout clean (no reserved space for a hidden star strip). */
body.hide-track-ratings .detail-rating,
body.hide-track-ratings .detail-track-like {
    display: none !important;
}

body.hide-album-detail-rating .detail-like-btn {
    display: none !important;
}

/* Per-track device-presence dots inside the album detail panel. Driven
   by the `showTrackDevicePresence` setting (default on). The album-level
   chip on the cover is intentionally NOT scoped here — it stays visible
   so the user can still tell at a glance that something on this album
   is on a device. */
body.hide-track-device-presence .detail-track-item .device-presence-stack {
    display: none !important;
}

.detail-track-list {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.detail-work-header {
    margin-top: 8px;
    margin-bottom: 2px;
    padding: 4px 8px;
    display: grid;
    /* Column 1 is the fold chevron; column 2 carries the label+title. */
    grid-template-columns: auto 1fr;
    grid-template-rows: auto auto;
    column-gap: 6px;
    align-items: center;
    border-radius: 8px;
    transition: background 0.2s;
    cursor: pointer;
    user-select: none;
}

.detail-work-header:hover {
    background: var(--overlay-hover);
}

.detail-work-chevron {
    grid-row: 1 / span 2;
    grid-column: 1;
    align-self: center;
    justify-self: start;
    width: 24px;
    height: 24px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: 0;
    padding: 0;
    color: var(--text-muted);
    font-size: 13px;
    line-height: 1;
    cursor: pointer;
    border-radius: 4px;
    transition: transform 0.18s ease, color 0.15s, background 0.15s;
    transform-origin: 50% 50%;
}

.detail-work-chevron:focus-visible {
    outline: none;
    box-shadow: 0 0 0 2px var(--accent-primary);
}

.detail-work-chevron:hover {
    color: var(--accent-primary);
    background: rgba(var(--accent-primary-rgb), 0.10);
}

/* Folding a group rotates its chevron from ▼ (expanded) to ► (collapsed). */
.detail-work-collapsed .detail-work-chevron {
    transform: rotate(-90deg);
}

/* A group header whose subtree contains the currently-playing track gets
   an accent tint + a speaker marker — but only on headers that are still
   VISIBLE. Folded children carry .collapsed-hidden (display:none), so the
   indicator automatically climbs to the nearest open ancestor as levels
   fold in (track+work+movement → work+movement → work). The marker's
   hidden attribute is cleared by JS when the group is playing. */
.detail-work-header.has-playing .detail-work-label,
.detail-work-header.has-playing .detail-work-title {
    color: var(--accent-primary);
}
.detail-work-header.has-playing .detail-work-chevron {
    color: var(--accent-primary);
}
/* The header already carries its own inline speaker marker; suppress the
   universal .has-playing::after badge base.css paints on cards/rows. */
.detail-work-header.has-playing::after {
    display: none;
}
.detail-work-playing-mark {
    display: none;
    color: var(--accent-primary);
    margin-right: 6px;
    vertical-align: middle;
}
.detail-work-playing-mark svg {
    display: block;
}
.detail-work-header.has-playing .detail-work-playing-mark:not([hidden]) {
    display: inline-flex;
    align-items: center;
}

.detail-work-label {
    grid-row: 1;
    grid-column: 2;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text-muted);
}

.detail-work-title {
    grid-row: 2;
    grid-column: 2;
    font-size: 12px;
    font-weight: 600;
    color: var(--text-secondary);
    line-height: 1.3;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.detail-work-meta,
.queue-album-work-meta,
.qah-title-meta {
    color: var(--text-muted);
    font-weight: 500;
    font-size: 0.85em;
    letter-spacing: 0.02em;
    margin-left: 4px;
}

/* Hierarchical group tiers — set by the depth in the user's track
   grouping. Tier 0 (outermost) is the boldest; deeper levels indent +
   tone down so the structure reads as a tree. */
.detail-work-header--tier-0 {
    margin-top: 12px;
    padding-left: 8px;
}
.detail-work-header--tier-0 .detail-work-title {
    font-size: 13.5px;
    font-weight: 700;
    color: var(--text-primary);
}
.detail-work-header--tier-0 .detail-work-label {
    color: var(--accent-primary);
}

.detail-work-header--tier-1 {
    margin-top: 10px;
    padding-left: 22px;
}

.detail-work-header--tier-2 {
    margin-top: 6px;
    padding-left: 36px;
}

/* Follow-up movement headers (a work's 2nd, 3rd, … movements) carry no
   "Movement name" chip — only the first movement in the list does, so the
   field isn't repeated once per movement. With the label row empty, the
   title seats itself beside the chevron instead of leaving a blank line
   above it. */
.detail-work-header--nochip .detail-work-title {
    grid-row: 1;
}

/* Empty-bucket marker — emitted for groups whose value is missing
   ("(no Composer)" / "(no Work)" etc.). The element exists only to keep
   the depth-walk's group-boundary logic correct; it shows nothing to
   the user, so their tracks read as ungrouped at this level. We keep it
   in the DOM as a zero-height block (rather than display:none) so the
   :not(:first-child) rule below can paint a visible boundary when the
   marker sits AFTER labelled groups — letting the user see where the
   labelled run ends and the unlabelled tracks begin. */
.detail-work-header-empty {
    display: block;
    height: 0;
    margin: 0;
    padding: 0;
    border: 0;
    background: transparent;
    pointer-events: none;
}
.detail-work-header-empty:hover {
    background: transparent;
}
.detail-work-header-empty:not(:first-child) {
    height: auto;
    margin-top: 18px;
    padding-top: 14px;
    border-top: 1px solid var(--border-subtle);
}

/* Track rows shift right slightly under nested groups so the eye
   follows the indentation of their containing header. The class is
   applied via JS depth check at render time — see _renderGroupNode. */
.detail-track-item[data-tg-indent="1"] { margin-left: 22px; }
.detail-track-item[data-tg-indent="2"] { margin-left: 36px; }
.detail-track-item[data-tg-indent="3"] { margin-left: 50px; }

/* Elements inside a folded group — hidden from view but retained in the
   DOM so the sibling-walk logic (search filter, collectGroupHeaderTracks,
   fold boundaries) keeps working over the logical order. Higher
   specificity than .detail-track-item / .detail-work-header so the hide
   always wins. */
.detail-track-item.collapsed-hidden,
.detail-work-header.collapsed-hidden {
    display: none;
}

.detail-track-item {
    display: flex;
    align-items: center;
    padding: 7px 12px;
    background: var(--bg-card);
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s;
    font-size: 13px;
}

.detail-track-item:hover {
    background: var(--bg-card-hover);
}

.detail-track-item.selected {
    background: rgba(var(--accent-primary-rgb), 0.18);
    outline: 1px solid rgba(var(--accent-primary-rgb), 0.5);
}

.detail-track-item.playing {
    background: rgba(var(--accent-primary-rgb), 0.10);
    box-shadow: /* bar moved to .accent-bar-host::after (queue.css) — an inset shadow on this
       8px-rounded row drew a rounded stub, not a straight line */
    box-shadow: none;
}
.detail-track-item.playing .detail-track-num,
.detail-track-item.playing .detail-track-title {
    color: var(--accent-primary, #ff6b35);
    font-weight: 600;
}

/* Speaker icon shown on the playing row. The marker SVG is rendered
   in the row markup but hidden by default; .playing flips it on so
   the user can spot the active track at a glance even when scrolled
   away from the player bar. Used in both the album-detail panel and
   the All Songs view. */
.detail-track-now-marker {
    display: none;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    color: var(--accent-primary, #ff6b35);
    flex: 0 0 auto;
    margin-right: 4px;
}
.detail-track-item.playing .detail-track-now-marker {
    display: inline-flex;
}
/* Same pulse the queue list uses (base.css → playing-pulse), minus the
   translateY since the marker is inline-flex rather than absolutely
   positioned. Keeps the animation visually consistent across the app. */
@keyframes detail-track-now-pulse {
    0%, 100% { transform: scale(1);    opacity: 0.85; }
    50%      { transform: scale(1.18); opacity: 1; }
}
.detail-track-item.playing .detail-track-now-marker {
    animation: detail-track-now-pulse 1.4s ease-in-out infinite;
}
@media (prefers-reduced-motion: reduce) {
    .detail-track-item.playing .detail-track-now-marker { animation: none; }
}
/* Hide the track number when the row is playing — the speaker icon
   takes its visual spot instead. Same pattern the CD ripper uses. */
.detail-track-item.playing .detail-track-num {
    display: none;
}
/* The album-detail track row already renders its own dedicated marker
   (.detail-track-now-marker) in the row's flex flow. Suppress the
   universal .playing::before badge from base.css so the two don't
   stack — the dedicated marker is the source of truth here. */
.detail-track-item.playing::before { display: none; }

/* Subtle shade for tracks that are already in the play queue (but aren't
   the active one). A muted background + faint left border lets the user
   see at a glance which tracks they've lined up without overpowering the
   .playing highlight. */
.detail-track-item.queued {
    background: rgba(var(--accent-primary-rgb), 0.04);
    box-shadow: box-shadow: none;
}
.detail-track-item.queued .detail-track-num {
    color: rgba(var(--accent-primary-rgb), 0.75);
}

/* Per-track like button (small heart on each row) */
.detail-track-like {
    background: transparent;
    border: none;
    color: var(--text-muted);
    font-size: 15px;
    padding: 2px 8px;
    margin: 0 4px 0 2px;
    cursor: pointer;
    opacity: 0.35;
    transition: color 0.15s ease, opacity 0.15s ease, transform 0.1s ease;
    flex-shrink: 0;
}
.detail-track-item:hover .detail-track-like {
    opacity: 0.8;
}
.detail-track-like:hover {
    color: var(--state-danger);
    opacity: 1 !important;
    transform: scale(1.15);
}
.detail-track-like.liked {
    color: var(--state-danger);
    opacity: 1;
}

/* 5-star rating widget */
.detail-rating {
    display: inline-flex;
    gap: 1px;
    margin: 0 6px;
    opacity: 0.35;
    transition: opacity 0.15s ease;
    flex-shrink: 0;
}
.detail-track-item:hover .detail-rating,
.detail-rating:has(.filled) {
    opacity: 1;
}
.detail-rating-star {
    cursor: pointer;
    color: var(--text-muted);
    font-size: 14px;
    transition: color 0.12s ease, transform 0.1s ease;
    user-select: none;
}
.detail-rating-star:hover {
    transform: scale(1.2);
}
.detail-rating-star.filled {
    color: var(--accent-secondary);
}

.detail-track-item--after-work {
    margin-top: 10px;
}

.detail-track-num {
    width: 24px;
    color: var(--text-muted);
    font-size: 12px;
}

.detail-track-title {
    flex: 1;
    font-size: 13px;
    line-height: 1.3;
}

.detail-track-duration {
    color: var(--text-muted);
    font-size: 12px;
}

.detail-track-item .audio-badge,
.queue-song-item .audio-badge,
.queue-album-track .audio-badge {
    margin-right: 10px;
}

.detail-addqueue-btn {
    width: 50px;
    height: 50px;
    background: var(--bg-card);
    border: none;
    border-radius: 50%;
    color: var(--text-secondary);
    font-size: 20px;
    cursor: pointer;
}

.detail-addqueue-btn:hover {
    background: var(--bg-card-hover);
    color: var(--accent-primary);
}

.detail-cover {
    width: 100%;
    aspect-ratio: 1;
    border-radius: 15px;
    margin-bottom: 25px;
    background: var(--bg-card);
    background-size: cover;
    background-position: center;
    /* Anchor for absolutely-positioned overlays (quality badge etc.). */
    position: relative;
    overflow: hidden;
}

/* Quality chip on the detail-panel cover — same FLAC/MP3/etc. pill
   shape used on grid cards, sized up to match the larger detail cover. */
.detail-quality-badge {
    position: absolute;
    bottom: 12px;
    left: 12px;
    pointer-events: none;
    z-index: 2;
}
.detail-quality-badge .audio-badge {
    font-size: 12px;
    padding: 4px 10px;
}

.detail-actions {
    display: flex;
    gap: 15px;
    margin-bottom: 30px;
}

.detail-play-btn {
    background: var(--accent-primary);
    border: none;
    padding: 15px 30px;
    border-radius: 30px;
    color: white;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    flex: 1;
}

.detail-play-btn:hover {
    opacity: 0.9;
}

.detail-like-btn {
    width: 50px;
    height: 50px;
    background: var(--bg-card);
    border: none;
    border-radius: 50%;
    color: var(--text-secondary);
    font-size: 20px;
    cursor: pointer;
}

.detail-like-btn:hover {
    background: var(--bg-card-hover);
}

/* (The unified `.detail-close` rule lives near the top of this file,
   alongside the panel-layout primitives. The duplicate flat-style
   block that used to live here is removed — it was overriding the
   round accent button by source order.) */

.detail-header {
    margin-bottom: 30px;
}

.detail-title {
    font-size: 24px;
    margin-bottom: 8px;
}

.detail-artist {
    color: var(--text-secondary);
    font-size: 16px;
    margin-bottom: 15px;
}

.detail-meta {
    color: var(--text-muted);
    font-size: 13px;
    margin-bottom: 25px;
}

/* Phone-layout-only album actions (web-mobile.css shows them): the "play
   next" square button and the hero kebab. Hidden on desktop so the desktop
   action row and header are unchanged. */
.detail-playnext-btn,
.detail-more-btn {
    display: none;
}

/* Kebab menu (anchored under .detail-more-btn; phone layouts only). */
.detail-more-menu {
    position: fixed;
    z-index: 10050;
    min-width: 200px;
    padding: 6px;
    border-radius: 12px;
    background: var(--surface-elevated, #1f1f2c);
    border: 1px solid var(--border-subtle, #2a2a3a);
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.5);
    display: flex;
    flex-direction: column;
}
.detail-more-item {
    min-height: 44px;
    padding: 0 14px;
    border: none;
    border-radius: 8px;
    background: none;
    color: var(--text-primary, #fff);
    font: inherit;
    font-size: 0.95rem;
    text-align: left;
    cursor: pointer;
}
.detail-more-item:hover,
.detail-more-item:focus-visible {
    background: rgba(255, 255, 255, 0.06);
}