/* ---------- Music module ---------- */

/* Tighter than the site-wide .card default (1.25rem) — safe to override
   here since this stylesheet only loads on music pages, not site-wide. */
.card { padding: .7rem .8rem; }
.page-head-group { margin-bottom: .5rem; }

/* Heading + right-aligned action link/button on the same row — used for
   every section header in this module (My albums, My tracks, etc.). Only
   ever defined in profile.css before, which this stylesheet doesn't load. */
.panel-head-inline { display: flex; align-items: center; justify-content: space-between; margin-bottom: .6rem; }
.panel-head-inline h3 { margin: 0; }

/* Icon-only add button, right-aligned with the page title — same base rule
   every other module (forum/blog/downloads/community) already duplicates
   in its own CSS; without it the plus icon has no centering inside the
   circular button at all. */
.page-add-btn {
    display: flex; align-items: center; justify-content: center;
    width: 30px; height: 30px; border-radius: 50%; flex-shrink: 0;
    background: var(--indigo); text-decoration: none; font-size: .82rem;
    box-shadow: 0 3px 10px -3px rgba(0,0,0,.3);
    transition: background .12s ease, transform .1s ease;
}
.page-add-btn:hover { background: var(--indigo-deep); }
.page-add-btn:active { transform: scale(.94); }

.music-subnav {
    display: flex; gap: .3rem; overflow-x: auto; padding: 0 .5rem .5rem;
    background: var(--surface); border-top: 1px solid var(--border);
}
.music-subnav a {
    padding: .5rem .7rem; font-size: .82rem; font-weight: 700; color: var(--ink-soft);
    border-bottom: 2px solid transparent; white-space: nowrap;
}
.music-subnav a.is-active { color: var(--indigo); border-bottom-color: var(--marigold, #f4a300); }

.music-breadcrumbs { font-size: .7rem; line-height: 1.2; margin-bottom: .4rem; }
.music-breadcrumbs a { color: var(--indigo); }

.music-album-actions { display: flex; gap: .5rem; margin-bottom: .75rem; }

/* ---------- Album grid ---------- */
.music-album-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(72px, 80px)); gap: .5rem; }
.music-album-card {
    display: flex; flex-direction: column; gap: .25rem; text-decoration: none; color: inherit;
}
.music-album-cover {
    aspect-ratio: 1; border-radius: var(--radius, 5px); overflow: hidden;
    background: linear-gradient(135deg, var(--indigo), var(--indigo-deep));
    display: flex; align-items: center; justify-content: center; color: #fff; font-size: 1.3rem;
}
.music-album-cover .icon-ui { color: inherit; }
.music-album-cover img { width: 100%; height: 100%; object-fit: cover; }
.music-album-title { font-size: .74rem; font-weight: 700; line-height: 1.2; }
.music-album-meta { font-size: .64rem; }

/* Matches the radio grid's touch-theme sizing exactly, so albums and radio
   channels look the same size on the narrower touch layout. */
body.touch-theme .music-album-grid { grid-template-columns: repeat(auto-fill, minmax(64px, 1fr)); gap: .4rem; }
body.touch-theme .music-album-cover { font-size: 1.05rem; }
body.touch-theme .music-album-title { font-size: .68rem; }
body.touch-theme .music-album-meta { font-size: .6rem; }

/* Track row styling lives in the global theme stylesheets (web and touch
   style.css), not here — shared track cards render inside the feed on
   pages (homepage, profile) that don't load this stylesheet, so the core
   track-row rules need to be available everywhere, not just here. */

/* ---------- Playlists ---------- */
.music-new-playlist-form { display: flex; gap: .5rem; }
.music-new-playlist-form input { flex: 1; }
.music-playlist-list { display: flex; flex-direction: column; gap: .3rem; }
.music-playlist-row { display: flex; align-items: center; gap: .6rem; padding: .5rem .5rem; border-radius: var(--radius, 5px); background: var(--paper); text-decoration: none; color: inherit; }
.music-playlist-icon {
    width: 34px; height: 34px; border-radius: 50%; flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
    background: color-mix(in srgb, var(--indigo) 14%, var(--surface)); color: var(--indigo); font-size: .8rem;
}
.music-playlist-info { display: flex; flex-direction: column; gap: .05rem; font-size: .85rem; }
.music-playlist-remove-link { background: none; border: none; color: var(--danger); font-size: .72rem; cursor: pointer; padding: 0; text-decoration: underline; }

/* ---------- Radio stations ---------- */
.music-radio-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: .6rem; }
.music-radio-card {
    display: flex; flex-direction: column; align-items: center; gap: .3rem; text-align: center;
    background: var(--paper); border: 1px solid var(--border); border-radius: var(--radius, 5px);
    padding: .8rem .5rem; cursor: pointer; font-family: inherit;
}
.music-radio-card.is-playing { border-color: var(--marigold, #f4a300); background: color-mix(in srgb, var(--marigold, #f4a300) 10%, var(--surface)); }
.music-radio-logo {
    width: 50px; height: 50px; border-radius: 50%; overflow: hidden;
    background: linear-gradient(135deg, var(--indigo), var(--indigo-deep));
    display: flex; align-items: center; justify-content: center; color: #fff; font-size: 1.2rem;
}
.music-radio-logo .icon-ui { color: inherit; }
.music-radio-logo img { width: 100%; height: 100%; object-fit: cover; }
.music-radio-name { font-size: .8rem; font-weight: 700; }
.music-radio-genre { font-size: .7rem; }

/* More compact on the touch theme — a narrower viewport benefits from
   smaller cards here more than the web theme's wider layout does. */
body.touch-theme .music-radio-grid { grid-template-columns: repeat(auto-fill, minmax(88px, 1fr)); gap: .4rem; }
body.touch-theme .music-radio-card { padding: .55rem .35rem; gap: .2rem; }
body.touch-theme .music-radio-logo { width: 38px; height: 38px; font-size: .95rem; }
body.touch-theme .music-radio-name { font-size: .72rem; }
body.touch-theme .music-radio-genre { font-size: .62rem; }

/* ---------- Add-to-playlist picker (small popup menu) ---------- */
.music-playlist-picker {
    position: fixed; z-index: 400; background: var(--surface); border: 1px solid var(--border);
    border-radius: var(--radius, 5px); box-shadow: var(--shadow); padding: .4rem; min-width: 180px;
    max-height: 240px; overflow-y: auto; display: none;
}
.music-playlist-picker.is-open { display: block; }
.music-playlist-picker button {
    display: block; width: 100%; text-align: left; padding: .45rem .6rem; background: none; border: none;
    border-radius: 5px; font-size: .82rem; cursor: pointer; color: var(--ink);
}
.music-playlist-picker button:hover { background: var(--paper); }
.music-playlist-picker-empty { padding: .5rem .6rem; font-size: .78rem; color: var(--ink-soft); }

/* Mini player CSS lives in the global theme stylesheets (web and touch
   style.css), not here — the mini player's markup is in the sidebar on
   every page, not just music ones, so it needs to be styled correctly
   regardless of whether this music.css stylesheet happens to be loaded
   on the current page. */

/* ---------- Track detail page ---------- */
.music-track-detail-hero { display: flex; align-items: center; gap: .8rem; margin-bottom: .7rem; }
.music-track-detail-cover {
    flex-shrink: 0; width: 72px; height: 72px; border-radius: var(--radius, 5px); overflow: hidden;
    background: linear-gradient(135deg, var(--indigo), var(--indigo-deep));
    display: flex; align-items: center; justify-content: center; color: #fff; font-size: 1.6rem;
}
.music-track-detail-cover .icon-ui { color: inherit; }
.music-track-detail-cover img { width: 100%; height: 100%; object-fit: cover; }
.music-track-detail-info h1 { font-size: 1.15rem; margin: 0 0 .15rem; line-height: 1.25; }
.music-track-detail-meta { font-size: .76rem; }
.music-track-detail-player { background: var(--paper); margin-bottom: .7rem; }
.music-track-detail-actions { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; padding-top: .6rem; border-top: 1px solid var(--border); }
.music-track-detail-actions .bookmark-toggle-btn { width: 34px; height: 34px; display: flex; align-items: center; justify-content: center; border-radius: 50%; border: 1px solid var(--border); background: var(--paper); cursor: pointer; }
.music-react-btn {
    display: inline-flex; align-items: center; gap: .35rem;
    padding: .45rem .9rem; border-radius: 5px; border: 1px solid var(--border);
    background: var(--paper); font-size: .85rem; font-weight: 700; cursor: pointer;
    transition: background .12s ease, border-color .12s ease;
}
.music-react-btn:hover { background: var(--border); }
.music-react-btn.is-active-like { background: rgba(42,157,111,.12); border-color: var(--success); color: var(--success); }
.music-react-btn.is-active-dislike { background: rgba(214,69,90,.1); border-color: var(--danger); color: var(--danger); }
.music-share-toggle-btn {
    display: inline-flex; align-items: center; gap: .35rem;
    padding: .45rem .9rem; border-radius: 5px; border: 1px solid var(--border);
    background: var(--paper); font-size: .85rem; font-weight: 700; cursor: pointer;
}
.music-share-toggle-btn:hover { background: var(--border); }
.music-share-form { flex-direction: column; gap: .5rem; margin-top: .6rem; width: 100%; }
.music-share-form textarea {
    font-family: inherit; font-size: .88rem; padding: .6rem .7rem; border: 1px solid var(--border);
    border-radius: var(--radius, 5px); background: var(--paper); resize: vertical;
}
.music-track-detail-login-note { padding-top: .6rem; border-top: 1px solid var(--border); font-size: .82rem; }