/* TrackBounty public website - M5a trends family sheet (spec v4 section 4.6; map v4.1 amendment A1). */
/* Trends (/trends) — public-website-redesign M5a, spec v4 §4.6 */
/* F-11 (kept, scoped): a long unbroken title must never widen the document. */
.tbp-tr { overflow-x: clip; }

/* Hero: eyebrow, h1, lede, the scan form, the hint, a status box. */
.tbp-tr-hero { display: grid; justify-items: start; gap: 22px; padding: 56px 0 8px; }
@media (min-width: 1024px) { .tbp-tr-hero { padding-top: 80px; } }
@media (max-width: 767px) { .tbp-tr-hero { gap: 18px; padding-top: 40px; } }
.tbp-tr-hero h1 { max-width: 20ch; }
.tbp-tr-hero .tbp-status { width: 100%; max-width: 560px; }
.tbp-tr-scan { grid-template-columns: minmax(0, 1fr) auto; align-items: start; gap: 12px; width: 100%; max-width: 560px; }
@media (max-width: 479px) { .tbp-tr-scan { grid-template-columns: minmax(0, 1fr); } }
.tbp-tr-scan .tbp-field { min-width: 0; }
.tbp-tr-scan .tbp-field input:disabled { background: var(--tb-tint); color: var(--tb-ink-3); cursor: not-allowed; }
.tbp-tr-scan .tb-btn:disabled { opacity: .6; cursor: not-allowed; }
/* tokens.css draws .tb-paused as the dark landing scanner's amber box with light
   text; inside the warn status box it is plain text. */
.tbp-tr .tb-paused { max-width: none; margin: 0; padding: 0; border: 0; border-radius: 0; background: none; color: var(--tb-ink-2); font-size: 16px; line-height: 1.5; text-align: left; }
.tbp-tr .tb-paused strong { color: var(--tb-ink); }

/* Sections: h2, lede, the grid, a meta foot or a hairline-topped empty state. */
.tbp-tr-section { padding-top: 64px; }
@media (max-width: 767px) { .tbp-tr-section { padding-top: 48px; } }
.tbp-tr-head { display: grid; gap: 10px; margin-bottom: 26px; }
.tbp-tr-foot { margin-top: 18px; }
.tbp-tr-empty { padding-top: 22px; border-top: 1px solid var(--tb-line); }

/* Grids: sounds auto-fill 240 (2 columns on phones), editors 4 / 2, fandoms 3 / 2 / 1. */
.tbp-tr-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 16px; }
.tbp-tr-editors { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.tbp-tr-fandoms { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
@media (max-width: 1023px) { .tbp-tr-fandoms { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 767px) {
  .tbp-tr-grid, .tbp-tr-editors { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .tbp-tr-fandoms { grid-template-columns: minmax(0, 1fr); }
}
.tbp-tr-grid > *, .tbp-tr-editors > *, .tbp-tr-fandoms > * { min-width: 0; }

/* Sound card: hairline, the 1:1 mosaic over its gradient and initial, a two-line
   title, the author, pills, meta. A card with a song page is one link. */
.tbp-tr .tr-card { padding: 12px; border: 1px solid var(--tb-line); border-radius: 10px; background: var(--tb-paper); transition: border-color 150ms var(--tb-ease); }
.tbp-tr .tr-card:not(.tr-card-static):hover, .tbp-tr .tr-editor:not(.tr-editor-static):hover { border-color: var(--tb-ink); }
.tbp.tbp-tr .tr-card > a, .tbp.tbp-tr .tr-card > a:hover, .tbp.tbp-tr .tr-editor > a, .tbp.tbp-tr .tr-editor > a:hover { color: inherit; text-decoration: none; }
.tbp-tr .tr-card > a, .tbp-tr .tr-card > .tbp-tr-card-in { display: grid; align-content: start; gap: 8px; min-width: 0; }
.tbp-tr-art { position: relative; display: flex; align-items: center; justify-content: center; aspect-ratio: 1 / 1; overflow: hidden; border-radius: 8px; }
.tbp-tr-art::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, .35) 100%); }
.tbp-tr .tr-card-initial { position: relative; z-index: 1; color: rgba(255, 255, 255, .92); font-size: 48px; font-weight: 800; letter-spacing: -0.02em; text-shadow: 0 2px 8px rgba(0, 0, 0, .35); }
.tbp-tr .tbp-tr-art img { position: absolute; inset: 0; z-index: 2; width: 100%; height: 100%; object-fit: cover; }
.tbp-tr .tr-card h3 { display: -webkit-box; overflow: hidden; -webkit-line-clamp: 2; -webkit-box-orient: vertical; font-size: 17px; font-weight: 700; line-height: 1.3; letter-spacing: -0.01em; overflow-wrap: anywhere; text-wrap: wrap; }
.tbp-tr-author { overflow: hidden; color: var(--tb-ink-2); font-size: 14px; line-height: 1.4; white-space: nowrap; text-overflow: ellipsis; }
.tbp-tr-pills { display: flex; flex-wrap: wrap; gap: 6px; }
.tbp-tr .tr-card .tbp-meta { overflow-wrap: anywhere; }

/* Editor tile: hairline, the 64 px avatar (the site's proxy over the initial),
   the handle, the niche, the week's gain in the ok colour. */
.tbp-tr .tr-editor { padding: 18px 12px 16px; border: 1px solid var(--tb-line); border-radius: 10px; background: var(--tb-paper); text-align: center; transition: border-color 150ms var(--tb-ease); }
.tbp-tr .tr-editor > a, .tbp-tr .tr-editor > .tbp-tr-card-in { display: grid; justify-items: center; align-content: start; gap: 4px; min-width: 0; }
.tbp-tr .tr-avatar, .tbp-tr-user-avatar { position: relative; display: flex; flex: none; align-items: center; justify-content: center; overflow: hidden; border: 1px solid var(--tb-line); border-radius: 50%; background: var(--tb-tint); color: var(--tb-ink); font-weight: 800; }
.tbp-tr .tr-avatar { width: 64px; height: 64px; margin-bottom: 6px; font-size: 24px; }
.tbp-tr .tr-avatar img, .tbp-tr-user-avatar img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.tbp-tr .tr-editor h3 { font-size: 14px; font-weight: 700; line-height: 1.3; letter-spacing: -0.01em; overflow-wrap: anywhere; }
.tbp-tr-niche { color: var(--tb-ink-3); font-size: 13px; }
.tbp-tr-delta { color: #1B7F3B; font-size: 13px; font-weight: 700; }

/* Fandom card: the title, the date in bold ink-2, a two-line overview, the
   related sounds as underlined links. */
.tbp-tr-fandom { display: grid; align-content: start; gap: 8px; padding: 16px; border: 1px solid var(--tb-line); border-radius: 10px; background: var(--tb-paper); }
.tbp-tr-fandom h3 { font-size: 19px; line-height: 1.2; letter-spacing: -0.015em; overflow-wrap: anywhere; }
.tbp-tr-when { color: var(--tb-ink-2); font-size: 14px; font-weight: 700; }
.tbp-tr-overview { display: -webkit-box; overflow: hidden; -webkit-line-clamp: 2; -webkit-box-orient: vertical; color: var(--tb-ink-2); font-size: 15px; line-height: 1.5; }
.tbp-tr-related { font-size: 14px; line-height: 1.7; overflow-wrap: anywhere; }
.tbp-tr-related small { display: block; margin-bottom: 2px; color: var(--tb-ink-3); font-size: 13px; line-height: 1.45; }
.tbp-tr-related a { margin-right: 12px; }

/* The personalised band (?u=): a hairline panel with the account, its sections
   and the Discord row. */
.tbp-tr-personal { display: grid; gap: 24px; margin-top: 36px; padding: 24px; border: 1px solid var(--tb-line); border-radius: 12px; }
@media (max-width: 767px) { .tbp-tr-personal { padding: 18px 16px; } }
.tbp-tr-user { display: flex; align-items: center; gap: 14px; padding-bottom: 18px; border-bottom: 1px solid var(--tb-line); }
.tbp-tr-user > div { min-width: 0; }
.tbp-tr-user-avatar { width: 56px; height: 56px; font-size: 22px; }
.tbp-tr-personal h2 { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; font-size: 26px; letter-spacing: -0.02em; overflow-wrap: anywhere; }
.tbp-tr-sub { display: grid; gap: 16px; }
.tbp-tr-personal h3 { font-size: 22px; }
@media (max-width: 767px) { .tbp-tr-personal h3 { font-size: 20px; } }
.tbp-tr-discord { padding-top: 18px; border-top: 1px solid var(--tb-line); }
.tbp-tr-discord .tbp-alt { flex: 1 1 24ch; }

/* The black band: the same band as the homepage, after the last section; its
   buttons are the chrome's .tb-btn family (outline white on the band, yellow). */
.tbp-tr-band { margin-top: 96px; }
@media (max-width: 767px) { .tbp-tr-band { margin-top: 64px; } }

/* A2 (2026-10-11): each grid opens with four cards (the desktop row); the rest sit in a native disclosure whose summary is the
   family's outline small button, so the lazy low-priority mosaics behind it never load until a reader asks. */
.tbp-tr details.tbp-tr-more { margin: 16px 0 0; }
.tbp-tr details.tbp-tr-more > summary { list-style: none; cursor: pointer; }
.tbp-tr details.tbp-tr-more > summary::-webkit-details-marker { display: none; }
.tbp-tr details.tbp-tr-more > summary::before { content: "+ "; }
.tbp-tr details.tbp-tr-more[open] > summary::before { content: "\2212  "; }
.tbp-tr details.tbp-tr-more[open] > summary { margin-bottom: 16px; }