/* Real-score statistics block on /charts/ pages (layouts/_partials/charts/songs.html).
   Loaded only by pages that have data. Kept apart from extras.css and custom.css on purpose.
   Colours come from the site variables (--mtp-*). */
.mtp-songs {
  margin: 34px 0 30px; padding: 22px 20px 18px; background: var(--mtp-raised);
  border: 1px solid var(--mtp-line); border-radius: 2px;
  --songs-a: var(--mtp-brass); --songs-b: var(--mtp-copper); --songs-c: var(--mtp-muted);
}
.mtp-songs > h2 { margin: 0 0 8px; }
.mtp-songs h3 { margin: 26px 0 6px; font-size: 1.1rem; color: var(--mtp-brass-bright); }
.mtp-songs h4 { margin: 18px 0 4px; font-size: 1rem; color: var(--mtp-paper); }
.mtp-songs-insight { max-width: 70ch; margin: 0 0 10px; font-size: 1.05rem; line-height: 1.55; }
.mtp-songs-cap { margin: 2px 0 10px; max-width: 74ch; color: var(--mtp-muted); font-size: 13.5px; line-height: 1.5; }
.mtp-songs-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; max-width: 100%; contain: inline-size; }

/* legend */
.mtp-songs-legend { display: flex; flex-wrap: wrap; gap: 6px 18px; margin: 0 0 10px; font-size: 13px; color: var(--mtp-muted); }
.mtp-songs-legend i { display: inline-block; width: 12px; height: 12px; margin-right: 6px; vertical-align: -1px; border: 1px solid var(--mtp-line); }

/* bar chart: label | track | value, note on its own line under the label on narrow screens */
.markdown .mtp-bars, .mtp-bars { list-style: none; margin: 0; padding: 0; min-width: 480px; }
.mtp-bars li {
  display: grid; grid-template-columns: minmax(150px, 17em) minmax(120px, 1fr) minmax(96px, auto);
  grid-template-areas: "label track val" ". note note";
  align-items: center; column-gap: 12px; padding: 5px 0; border-bottom: 1px solid var(--mtp-line);
}
.mtp-bars li::marker { content: none; }
.mtp-bar-label { grid-area: label; color: var(--mtp-paper); font-size: 14.5px; line-height: 1.3; }
.mtp-bar-track { grid-area: track; display: flex; height: 16px; background: rgba(244, 233, 207, .06); border: 1px solid var(--mtp-line); }
.mtp-bar-track i { display: block; height: 100%; }
.mtp-bar-val { grid-area: val; text-align: right; font-size: 14px; white-space: nowrap; font-variant-numeric: tabular-nums; }
.mtp-bar-val strong { color: var(--mtp-brass-bright); }
.mtp-bar-pct { color: var(--mtp-muted); margin-left: 6px; }
.mtp-bar-note { grid-area: note; color: var(--mtp-muted); font-size: 12.5px; padding-bottom: 1px; }
.mtp-songs .k-a { background: var(--songs-a); }
.mtp-songs .k-b { background: var(--songs-b); background-image: repeating-linear-gradient(135deg, rgba(0,0,0,.35) 0 2px, transparent 2px 5px); }
.mtp-songs .k-c { background: var(--songs-c); opacity: .75; }

/* tables */
.mtp-songs-table { margin: 6px 0 8px; }
table.mtp-songs-table { min-width: 420px; }   /* the wrapper <div> shares the class and must not get a min-width */
.mtp-songs-table .num { text-align: right; font-variant-numeric: tabular-nums; }
.mtp-songs-table th[scope="row"] { white-space: normal; }

/* song lists */
.mtp-songs-groups { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 4px 34px; }
.mtp-songs-group h4 + .mtp-songs-cap { margin-bottom: 4px; }
.markdown .mtp-songlist, .mtp-songlist { list-style: none; margin: 4px 0 8px; padding: 0; }
.mtp-songlist li { padding: 7px 0; border-bottom: 1px solid var(--mtp-line); line-height: 1.4; font-size: 14.5px; }
.mtp-songlist li::marker { content: none; }
.mtp-song-title { display: block; color: var(--mtp-paper); font-weight: 600; }
.mtp-song-by, .mtp-song-work, .mtp-song-detail { display: block; color: var(--mtp-muted); font-size: 13.5px; }
.mtp-song-by a { color: var(--mtp-brass-bright); }
.mtp-song-detail { color: var(--mtp-brass); }

/* method + source */
.mtp-songs-method { margin-top: 26px; padding-top: 4px; border-top: 1px solid var(--mtp-line); }
.mtp-songs-method h3 { margin-top: 14px; font-size: .8rem; letter-spacing: .12em; text-transform: uppercase; color: var(--mtp-muted); }
.mtp-songs-method ul { margin: 0; padding-left: 1.2em; color: var(--mtp-muted); font-size: 12.5px; line-height: 1.55; }
.mtp-songs-method li { margin: 3px 0; }
.mtp-songs-source { margin: 12px 0 0; color: var(--mtp-muted); font-size: 12.5px; }
.mtp-songs-source a { color: var(--mtp-brass-bright); }

@media (max-width: 640px) {
  .mtp-songs { padding: 16px 12px 14px; margin-left: -2px; margin-right: -2px; }
  .markdown .mtp-bars, .mtp-bars { min-width: 0; }
  .mtp-bars li { grid-template-columns: 1fr auto; grid-template-areas: "label val" "track track" "note note"; row-gap: 3px; }
  .mtp-songs-groups { grid-template-columns: 1fr; }
}

/* print: black and white; the bars keep their shape through grey fills and a hatch */
@media print {
  .mtp-chart-page .mtp-songs { border: 1px solid #000 !important; padding: 8pt !important; break-inside: auto; }
  .mtp-chart-page .mtp-songs h3, .mtp-chart-page .mtp-songs h4 { break-after: avoid; }
  .mtp-chart-page .mtp-songs-block { break-inside: avoid; }
  .mtp-chart-page .mtp-songs .mtp-bar-track { background: #fff !important; border: 1px solid #000 !important; }
  .mtp-chart-page .mtp-songs .k-a { background: #000 !important; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .mtp-chart-page .mtp-songs .k-b { background: #777 !important; background-image: repeating-linear-gradient(135deg, #fff 0 1.5px, transparent 1.5px 4px) !important; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .mtp-chart-page .mtp-songs .k-c { background: #ccc !important; opacity: 1; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .mtp-chart-page .mtp-songs .mtp-songs-scroll { overflow: visible; }
  .mtp-chart-page .mtp-bars { min-width: 0; }
  .mtp-chart-page .mtp-songs-legend i { border-color: #000 !important; }
  .mtp-chart-page .mtp-songs-legend i.k-a { background: #000 !important; }
  .mtp-chart-page .mtp-songs-legend i.k-b { background: #777 !important; }
  .mtp-chart-page .mtp-songs-legend i.k-c { background: #ccc !important; }
  .mtp-chart-page .mtp-songs-cap, .mtp-chart-page .mtp-songs-method ul { font-size: 9pt; }
  .mtp-chart-page .mtp-songs a { text-decoration: none; }
  .mtp-chart-page .mtp-songs-groups { display: block; }
}