/* Ranking is a single readable chart, independent of the catalog's density. */
.top-chart-rank { display: none; }
.library-top-chart #songList .song-card-plays { display:flex; align-items:center; justify-content:center; gap:6px; }
.top-chart-stat-toggle.btn-action { display:inline-grid; place-items:center; flex:0 0 28px; width:28px; height:30px; min-width:28px; min-height:30px; padding:5px; border:1px solid transparent; border-radius:7px; color:var(--vault-muted); background:transparent; cursor:pointer; }
.top-chart-stat-toggle.btn-action svg { display:block; width:17px; height:17px; fill:none; stroke:currentColor; }
.top-chart-stat-toggle:hover,.top-chart-stat-toggle[aria-expanded="true"] { color:var(--vault-gold); background:rgba(var(--vault-gold-rgb),.1); border-color:rgba(var(--vault-gold-rgb),.16); }
.top-chart-stat-toggle:focus-visible,.top-inline-stats-close:focus-visible { outline:2px solid var(--vault-gold); outline-offset:3px; }
#songList>.top-inline-stats { align-self:stretch; width:auto; min-width:0; max-width:none; margin:2px 0 10px 76px; padding:10px 16px; border:1px solid var(--vault-line); border-radius:12px; background:var(--vault-panel); }
.top-inline-stats-heading { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:4px; }
.top-inline-stats-heading h3 { margin:0; color:var(--vault-muted); font-size:12px; font-weight:500; }
.top-inline-stats-close { display:grid; place-items:center; width:28px; height:28px; border:0; border-radius:7px; background:transparent; color:var(--vault-muted); font-size:22px; cursor:pointer; }
.top-inline-stats-close:hover { color:var(--vault-text); background:var(--vault-line); }
.top-inline-stats .track-detail-stats-top { margin:0 0 6px; }
.top-inline-stats .track-detail-stat-summary { flex-direction:row; flex-wrap:wrap; align-items:baseline; gap:4px 12px; }
.top-inline-stats .track-detail-stat-summary strong { font-size:26px; }
.top-inline-stats .track-detail-plot { padding-top:0; }
.top-inline-stats .track-detail-chart { height:144px; max-height:none; margin-bottom:8px; }
.top-inline-stats .track-detail-stats-status:empty { display:none; }
.top-inline-stats .track-chart-data { margin-bottom:8px; }
.top-inline-stats .track-detail-stat-footer { padding-top:8px; }
.top-inline-stats .track-detail-chart-note { margin:4px 0 0; }
.top-inline-stats-body>p.track-detail-muted { margin:6px 0 0; }
@media(max-width:760px) {
  #songList>.top-inline-stats { margin-left:0; padding:12px; }
  .library-top-chart #songList .song-card-plays { gap:2px; }
  .top-chart-stat-toggle.btn-action { width:24px; min-width:24px; flex-basis:24px; padding:3px; }
}
@media(pointer:coarse) { .top-chart-stat-toggle.btn-action,.top-inline-stats-close { min-height:44px; } }
.library-heading { min-width: 0; }
#topChartEyebrow { margin: 0 0 6px; color: var(--vault-gold); font-size: 10px; font-weight: 750; letter-spacing: .19em; }
#topChartSubtitle { margin: 8px 0 0; color: var(--library-secondary-text); font-size: 12px; line-height: 1.5; }
#sortBar.top-chart-header { margin-top: 28px; gap: 18px 12px; }
#sortBar.top-chart-header #listHeading { font-size: 32px; line-height: 1.15; letter-spacing: -.025em; }
#sortBar.top-chart-header .library-sort-copy { display: grid; grid-template-columns: max-content minmax(0, 1fr); align-items: center; row-gap: 0; }
#sortBar.top-chart-header .library-heading { display: contents; }
#sortBar.top-chart-header #topChartEyebrow { grid-column: 1 / -1; grid-row: 1; }
#sortBar.top-chart-header #listHeading { grid-column: 1; grid-row: 2; }
#sortBar.top-chart-header #songCount { grid-column: 2; grid-row: 2; justify-self: start; font-variant-numeric: tabular-nums; }
#sortBar.top-chart-header #topChartSubtitle { grid-column: 1 / -1; grid-row: 3; }
.library-top-chart #sortBar .library-density { display: none; }
.library-top-chart #sortBar .library-list-tools { order: 2; margin-left: auto; }
.library-top-chart #sortBar .library-sort-copy { flex: 1 1 auto; }
.top-chart-play { display: inline-flex; align-items: center; justify-content: center; gap: 9px; min-height: 40px; padding: 10px 16px; border: 1px solid var(--vault-gold); border-radius: 10px; color: #1a160b; background: var(--vault-gold); font: inherit; font-size: 12px; font-weight: 750; cursor: pointer; }
.top-chart-play:hover { filter: brightness(1.08); }
.top-chart-play:disabled { opacity: .5; cursor: default; }
.top-chart-play:focus-visible { outline: 2px solid var(--vault-gold); outline-offset: 4px; }
.top-chart-play[hidden], #topChartPeriods[hidden], .top-chart-columns[hidden], #topChartEyebrow[hidden], #topChartSubtitle[hidden] { display: none; }
#topChartPeriods { flex: 0 0 100%; order: 3; min-width: 0; }
#topChartPeriods #topPeriodOptions { display: flex !important; flex-wrap: wrap; width: fit-content; max-width: 100%; margin: 0; padding: 4px; gap: 3px; border: 1px solid var(--vault-line); border-radius: 11px; background: #111014; overflow: visible; }
#topChartPeriods .chip { min-height: 34px; padding: 7px 13px; border: 0; border-radius: 7px; background: transparent; color: var(--library-secondary-text); font-size: 12px; }
#topChartPeriods .chip.active { background: #232026; color: var(--vault-gold); box-shadow: none; }
.library-top-chart #topPeriodToggle { display: none; }
.library-top-chart #libraryCatalogControls .library-catalog-sort { display: none; }
.library-top-chart #libraryCatalogControls { order: 4; }
.library-top-chart #sortBar > :is(.catalog-status-note, .catalog-load-error) { order: 5; }
.top-chart-columns { display: grid; grid-template-columns: 44px minmax(0, 1fr) 112px 108px; align-items: center; gap: 16px; padding: 12px 12px; border-bottom: 1px solid var(--vault-line); color: var(--library-secondary-text); font-size: 11px; }
.top-chart-columns > :nth-child(3) { text-align: center; }
html body.library-top-chart #songList { display: flex; flex-direction: column; gap: 0; }
html body.library-top-chart #songList .song-card { display: grid; position: relative; grid-template-columns: 44px 48px minmax(0, 1fr) 236px; grid-template-rows: auto; align-items: center; gap: 16px; width: 100%; height: auto; min-height: 82px; padding: 12px; border: 0; border-bottom: 1px solid #ffffff0b; border-radius: 9px; overflow: visible; background: transparent; box-shadow: none; }
html body.library-top-chart #songList .song-card:hover { background: #ffffff04; border-color: #ffffff0b; }
html body.library-top-chart #songList .song-card.playing, html body.library-top-chart #songList .song-card.library-selected { background: rgba(var(--vault-gold-rgb), .07); box-shadow: none; }
html body:is(.library-top-chart,.library-grails) #songList .top-chart-rank { display: block; grid-column: 1; font-size: 23px; font-weight: 750; font-variant-numeric: tabular-nums; text-align: center; color: var(--vault-muted); }
html body:is(.library-top-chart,.library-grails) #songList .top-chart-rank.top-chart-leader { color: var(--vault-gold); }
html body.library-top-chart #songList .song-art { grid-column: 2; grid-row: 1; width: 48px; height: 48px; aspect-ratio: 1; border-radius: 8px; align-self: center; }
html body.library-top-chart #songList .song-cover { width: 100%; height: 100%; border-radius: inherit; }
html body.library-top-chart #songList .song-info { display: flex; grid-column: 3; grid-row: 1; flex-direction: column; padding: 0; min-width: 0; }
html body.library-top-chart #songList .song-title { font-size: 14px; line-height: 20px; }
html body.library-top-chart #songList .song-artist { font-size: 12px; line-height: 18px; }
html body.library-top-chart #songList .song-meta { height: auto; min-height: 0; flex-wrap: wrap; max-width: none; gap: 4px; margin: 4px 0 0; overflow: visible; }
html body.library-top-chart #songList .song-meta :is(.song-badge, .library-song-tag) { height: auto; min-height: 19px; font-size: 10px; line-height: 15px; padding: 1px 5px; }
html body.library-top-chart #songList .song-meta .library-versions-toggle { position: static; margin: 0; background: transparent; }
html body.library-top-chart #songList .song-card-footer { display: grid; grid-column: 4; grid-row: 1; grid-template-columns: 112px 108px; gap: 16px; align-items: center; margin: 0; padding: 0; border: 0; }
html body.library-top-chart #songList .song-card-plays { text-align: center; color: var(--vault-text); font-size: 16px; font-weight: 650; overflow: visible; }
html body.library-top-chart #songList .song-actions { display: flex; justify-content: flex-end; gap: 0; }
html body.library-top-chart #songList .song-actions .btn-action { display: inline-flex; width: 36px; min-width: 36px; height: 36px; min-height: 36px; padding: 0; }
html body.library-top-chart #songList .song-actions .btn-download { display: none; }
html body.library-top-chart #songList .library-duration { display: none; }
html body.library-top-chart #songList .library-version-list { display: flex; flex-direction: column; padding: 8px 0 10px 12px; margin: 0 0 4px 76px; }
html body.library-top-chart #songList .library-version-list .song-card { grid-template-columns: 48px minmax(0, 1fr) 236px; }
html body.library-top-chart #songList .library-version-list .song-art { grid-column: 1; }
html body.library-top-chart #songList .library-version-list .song-info { grid-column: 2; }
html body.library-top-chart #songList .library-version-list .song-card-footer { grid-column: 3; }
html body.library-top-chart #songList .library-version-list .top-chart-rank { display: none; }
html body.library-top-chart #songList .library-song-select { top: calc(50% - 10px); left: 24px; right: auto; }
html body.library-top-chart.library-selecting #songList .top-chart-rank { visibility: hidden; }
@media (max-width: 1100px) {
  .top-chart-columns { grid-template-columns: 36px minmax(0, 1fr) 92px 96px; gap: 12px; }
  html body.library-top-chart #songList .song-card { grid-template-columns: 36px 44px minmax(0, 1fr) 200px; gap: 12px; }
  html body.library-top-chart #songList .song-art { width: 44px; height: 44px; }
  html body.library-top-chart #songList .song-card-footer { grid-template-columns: 92px 96px; gap: 12px; }
  html body.library-top-chart #songList .song-actions .btn-action { width: 32px; min-width: 32px; }
  html body.library-top-chart #songList .library-version-list .song-card { grid-template-columns: 44px minmax(0, 1fr) 200px; }
}
@media (max-width: 760px) {
  #sortBar.top-chart-header { margin-top: 18px; gap: 14px 10px; }
  #sortBar.top-chart-header #listHeading { font-size: 27px; }
  #sortBar.top-chart-header .library-sort-copy { flex-basis:100%; grid-template-columns:minmax(0,1fr) max-content; width:100%; min-width:0; }
  #sortBar.top-chart-header .library-list-tools { order: 2; }
  .library-top-chart #sortBar #libraryModeChips { order: -1; }
  .top-chart-columns { grid-template-columns: 28px minmax(0, 1fr) 70px 32px; padding-inline: 2px; gap: 8px; font-size: 10px; }
  html body.library-top-chart #songList .song-card { grid-template-columns: 28px 38px minmax(0, 1fr) 110px; min-height: 88px; padding: 10px 2px; gap: 8px; }
  html body.library-top-chart #songList .song-art { width: 38px; height: 38px; }
  html body:is(.library-top-chart,.library-grails) #songList .top-chart-rank { font-size: 19px; }
  html body.library-top-chart #songList .song-title { font-size: 13px; white-space: normal; overflow-wrap: anywhere; }
  html body.library-top-chart #songList .song-artist { font-size: 11px; }
  html body.library-top-chart #songList .song-card-footer { grid-template-columns: 70px 32px; gap: 8px; }
  html body.library-top-chart #songList .song-card-plays { font-size: 14px; }
  html body.library-top-chart #songList .song-actions { display: grid; grid-template-columns: 32px; gap: 0; }
  html body.library-top-chart #songList .song-actions .btn-add-playlist { display: none; }
  html body.library-top-chart #songList .song-actions .btn-action { width: 32px; min-width: 32px; height: 32px; min-height: 32px; }
  html body.library-top-chart #songList .song-meta { display: none; }
  html body.library-top-chart #songList .library-version-list { margin-left: 32px; padding-left: 8px; }
  html body.library-top-chart #songList .library-version-list .song-card { grid-template-columns: 38px minmax(0, 1fr) 110px; }
  html body.library-top-chart #songList .library-song-select { left: 6px; }
}
@media (pointer: coarse) {
  #topChartPeriods .chip, .top-chart-play { min-height: 44px; }
  html body.library-top-chart #songList .song-actions .btn-action { min-height: 44px; }
}
