/* charts — page styles for /charts/, /song/ and /artist/ (theme.css carries the rest). */
.charts-page .status-head { align-items: flex-end; }
.charts-page .status-head .kicker a { color: inherit; }
.charts-page .lead { margin: 20px 0 0; }
.chart-controls { margin: 24px 0 8px; }
.chart-controls .label { margin-right: 2px; }
.chart-controls .label:not(:first-child) { margin-left: 12px; }
.chart-controls [aria-current="page"] { font-weight: 650; box-shadow: inset 0 -2px 0 var(--accent); }
.chart-countries { margin: 0 0 16px; line-height: 2; }
.chart-countries .label { margin-right: 6px; }
.chart-countries a { margin-right: 10px; white-space: nowrap; }
.chart-countries a[aria-current="page"] { font-weight: 650; }
.chart-table { font-variant-numeric: tabular-nums; }
.chart-table td.title a { color: var(--ink); font-weight: 600; }
.chart-table td.countries { font-size: 0.8125rem; color: var(--ink-2); white-space: nowrap; }
.movement { font-family: var(--mono); font-size: 0.8125rem; white-space: nowrap; }
.movement.up { color: var(--good-text); }
.movement.down { color: var(--serious); }
.movement.same { color: var(--muted); }
.ranks { list-style: none; padding: 0; }
.ranks li { padding: 6px 0; border-bottom: 1px solid var(--grid); }
.ranks .extra { font: 400 12px/1.4 var(--mono); color: var(--muted); display: block; }
.charts-body { max-width: 56rem; }
.playing-now { margin-top: 2.4em; }
.playing-now h2 { margin-bottom: 0; }
.playing-now .search-status { margin-top: 12px; }
.playing-now .result-meta .announced { color: var(--muted); }
.api-list .endpoint-row { margin: 0 0 10px; padding-top: 0; border-top: 0; }
.api-list .endpoint-row .label { text-decoration: underline; text-underline-offset: 3px; }
.charts-note { margin-top: 2.4em; padding-top: 16px; border-top: 1px solid var(--ink); }
.charts-note .badge { vertical-align: middle; margin-right: 8px; }
.charts-page .notice.warn { margin-top: 24px; }