/* TrackBounty public website - M5a songs family sheet (spec v4 section 4.5; map v4.1 amendment A1). */
/* Songs: /sounds (tbp-songs-*) and /sound/<slug> (tbp-song-*) */

/* --- /sounds -------------------------------------------------------------- */
.tbp-songs { padding-top: 48px; padding-bottom: 96px; }
@media (max-width: 767px) { .tbp-songs { padding-top: 36px; padding-bottom: 72px; } }
.tbp-songs-head { display: grid; justify-items: start; gap: 16px; max-width: 72ch; }
.tbp-songs-head h1 { font-size: 46px; font-weight: 800; letter-spacing: -0.035em; line-height: 1.05; }
@media (max-width: 1023px) { .tbp-songs-head h1 { font-size: 38px; } }
@media (max-width: 767px) { .tbp-songs-head h1 { font-size: 32px; } }
.tbp-songs-head .tbp-lede { max-width: 62ch; }
.tbp-songs-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin-top: 36px; padding: 0; list-style: none; }
@media (max-width: 1023px) { .tbp-songs-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 767px) { .tbp-songs-grid { grid-template-columns: minmax(0, 1fr); margin-top: 28px; } }
.tbp-songs-grid > li { min-width: 0; }
/* The card is the link; .tbp underlines text links, a card is not one. */
.tbp a.tbp-songs-card { display: grid; align-content: start; gap: 4px; height: 100%; padding: 18px 20px; border: 1px solid var(--tb-line); border-radius: 10px; color: var(--tb-ink); text-decoration: none; overflow-wrap: anywhere; transition: border-color 150ms var(--tb-ease); }
.tbp a.tbp-songs-card:hover { border-color: var(--tb-ink); }
.tbp-songs-t { font-size: 19px; font-weight: 700; line-height: 1.25; letter-spacing: -0.01em; }
.tbp-songs-a { color: var(--tb-ink-2); font-size: 15px; line-height: 1.4; }
.tbp-songs-m { margin-top: 8px; color: var(--tb-ink-3); font-size: 14px; line-height: 1.45; }
.tbp-songs-empty { margin-top: 36px; }
.tbp-songs-pager { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 12px 16px; margin-top: 40px; }

/* --- /sound/<slug> -------------------------------------------------------- */
.tbp-song { --tbp-song-accent: var(--tb-ink); }
@supports (color: color-mix(in srgb, red 50%, blue)) {
  .tbp-song { --tbp-song-accent: color-mix(in srgb, var(--card-primary, var(--tb-ink)) 62%, var(--tb-ink)); }
}
/* The mosaic hero: a decorative 240 px band (200 on phones) whose overlay fades */
.tbp-song-hero { position: relative; height: 240px; overflow: hidden; }
.tbp-song-mosaic { position: absolute; left: 0; top: 0; width: 100%; height: 100%; object-fit: cover; }
.tbp-song-fade { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, .35) 50%, var(--tb-paper) 100%); }
@media (max-width: 767px) { .tbp-song-hero { height: 200px; } }
.tbp-song-id { display: grid; justify-items: start; gap: 14px; padding-top: 32px; }
.tbp-song-id > * { max-width: 72ch; }
.tbp-song-id h1 { font-size: 46px; font-weight: 800; letter-spacing: -0.035em; line-height: 1.05; overflow-wrap: anywhere; }
@media (max-width: 1023px) { .tbp-song-id h1 { font-size: 38px; } }
@media (max-width: 767px) { .tbp-song-id h1 { font-size: 32px; } }
.tbp-song-id .tbp-lede { overflow-wrap: anywhere; }
.tbp-song-id .tbp-lede b { color: var(--tb-ink); font-weight: 700; }
.tbp-song-pills { display: flex; flex-wrap: wrap; gap: 8px; }
.tbp-song-pill { display: inline-flex; align-items: center; min-height: 32px; padding: 0 12px; border: 1.5px solid var(--tb-line-2); border-radius: 999px; color: var(--tb-ink-2); font-size: 13px; font-weight: 600; line-height: 1.2; }
.tbp-song-pill-genre { border-color: var(--tbp-song-accent); color: var(--tb-ink); }

/* Sections: hairline-topped, a 22 px heading, 17 px lede-style sentences, meta notes. */
.tbp-song-body { display: grid; gap: 40px; padding-top: 36px; padding-bottom: 96px; }
@media (max-width: 767px) { .tbp-song-body { gap: 32px; padding-top: 28px; padding-bottom: 72px; } }
.tbp-song-sec { display: grid; align-content: start; gap: 14px; min-width: 0; padding-top: 24px; border-top: 1px solid var(--tb-line); }
.tbp-song-sec h2 { font-size: 22px; font-weight: 800; letter-spacing: -0.02em; line-height: 1.2; }
@media (max-width: 767px) { .tbp-song-sec h2 { font-size: 20px; } }
.tbp-song-lead { max-width: 68ch; color: var(--tb-ink-2); font-size: 17px; line-height: 1.5; overflow-wrap: anywhere; }
.tbp-song-lead b { color: var(--tb-ink); font-weight: 700; }
.tbp-song .tbp-meta { max-width: 72ch; overflow-wrap: anywhere; }
.tbp-song-row { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 12px; }
.tbp-song-2 { display: grid; gap: 32px; }
@media (min-width: 768px) { .tbp-song-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 48px; } }

/* The five measured figures: the statistics strip in a five-column row, 13 px labels. */
.tbp-song-stats { gap: 24px; padding-top: 24px; }
@media (min-width: 768px) { .tbp-song-stats { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 24px; } }
@media (max-width: 767px) { .tbp-song-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; } }
.tbp-song-stats .tbp-stat { min-width: 0; }
.tbp-song-stats .tbp-stat-num { font-size: 34px; letter-spacing: -0.04em; overflow-wrap: anywhere; }
.tbp-song-stats .tbp-song-stat-date { font-size: 20px; letter-spacing: -0.02em; line-height: 1.2; padding-top: 6px; }
.tbp-song-stats .tbp-stat-lbl { margin-top: 6px; color: var(--tb-ink-3); font-size: 13px; font-weight: 500; }

/* Chips (outline, as the headline chips) and subject tags (pills on tint). */
.tbp-song-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.tbp-song-chips span { display: inline-flex; align-items: center; padding: 8px 14px; border: 1.5px solid var(--tb-line-2); border-radius: 999px; color: var(--tb-ink-2); font-size: 15px; font-weight: 600; line-height: 1.2; }
.tbp-song-tags { display: flex; flex-wrap: wrap; gap: 6px; }
.tbp-song-tags .tbp-pill { padding: 6px 9px; background: var(--tb-tint); color: var(--tb-ink-2); font-size: 12px; letter-spacing: .02em; white-space: normal; }
.tbp-song-hashtags { line-height: 1.6; }
.tbp-song-hashtags span { display: inline-block; margin-right: 8px; }

/* Bars: the tint track and ink fill of .tbp-prog, the song colour permitted on the fill. */
.tbp-song-prog > div { color: var(--tb-ink-2); font-size: 15px; gap: 6px 10px; }
.tbp-song-prog b { color: var(--tb-ink); font-weight: 700; font-variant-numeric: tabular-nums; }
.tbp-song-prog span { min-width: 0; overflow-wrap: anywhere; }
.tbp-song-prog i::after { background: var(--tbp-song-accent); }
/* Who was posting: editors in bolt, creators in ink. */
.tbp-song-split { display: flex; height: 10px; overflow: hidden; border-radius: 6px; background: var(--tb-tint); }
.tbp-song-split i { display: block; height: 100%; width: var(--w, 50%); }
.tbp-song-split-ed { background: var(--tb-bolt); }
.tbp-song-split-cr { background: var(--tb-ink); }
.tbp-song-split-lbl { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px 16px; color: var(--tb-ink-2); font-size: 15px; }
.tbp-song-split-lbl b { color: var(--tb-ink); font-variant-numeric: tabular-nums; }
.tbp-song-rows { display: grid; padding: 0; list-style: none; }
.tbp-song-rows li { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 9px 0; border-top: 1px solid var(--tb-line); color: var(--tb-ink-2); font-size: 15px; line-height: 1.4; }
.tbp-song-rows li:last-child { border-bottom: 1px solid var(--tb-line); }
.tbp-song-rows li > span { min-width: 0; overflow-wrap: anywhere; }
.tbp-song-rows b { flex: none; color: var(--tb-ink); font-weight: 700; font-variant-numeric: tabular-nums; }

/* Creative direction: the bolt-glyph bullet list with plain Do / Avoid lead-ins. */
.tbp-song-lines li { display: grid; grid-template-columns: 22px 1fr; gap: 10px; overflow-wrap: anywhere; }
.tbp-song-lines li::before { content: ''; width: 14px; height: 14px; margin-top: 6px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M9.5 1.5 3.5 9h4l-1 5.5L12.5 7h-4l1-5.5z' fill='%23FBD700' stroke='%230B0B0B' stroke-width='1.2' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center / contain; }

/* The two audiences as the two-ways columns; the section headings are 22 px here. */
.tbp-song-ways .tbp-way h2 { font-size: 22px; font-weight: 800; letter-spacing: -0.02em; line-height: 1.2; }
@media (max-width: 767px) { .tbp-song-ways .tbp-way h2 { font-size: 20px; } }
.tbp-song-ways .tbp-way > p { color: var(--tb-ink-2); font-size: 17px; }
.tbp-song-ways .tbp-way .tbp-row { gap: 12px; }

/* The lead form: the .tbp-form family in two columns from 768 px. */
.tbp-song-fields { grid-template-columns: minmax(0, 1fr); }
@media (min-width: 768px) { .tbp-song-fields { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.tbp-song-full { grid-column: 1 / -1; }
.tbp-song-turnstile { min-height: 65px; }
.tbp-song .tb-btn:disabled { opacity: .6; cursor: progress; }
.tbp-song .tbp-status[aria-live] { overflow-wrap: anywhere; }

/* The URL and copy-link row. */
.tbp-song-url { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 16px; padding-top: 20px; border-top: 1px solid var(--tb-line); }
.tbp-song-url .tbp-meta { min-width: 0; overflow-wrap: anywhere; }