/* ==========================================================================
   «Hører på» og «Lytt med» i chatten (25. oktober 2026).

   Linja står rett under navnet i toppen av samtalen, på sin egen rad, og
   ikke inne i overskriften: en knapp inne i en h2 er en overskrift som kan
   trykkes, og linja skal kunne brekke uten å dra navnet med seg.

   INGEN NYE BEGREP I STILARKET. Hver velger begynner på en klasse som
   finnes fra før (.topp-tittel), og knappen er Lodds egen .knapp.naken.liten
   med aria-pressed som tilstand. Derfor kom det ingen ny toppnivåklasse,
   ingen ny radfamilie og ingen ny knappeklasse: det er nøyaktig de tre
   tallene i tak.json som bare kan synke, og en sang er ikke en grunn til å
   finne opp et nytt listesystem.

   Alt er Lodd: trinnene (--s-, --t-, --r-), fargene fra :root i lodd.css og
   ingen pikselverdi på frihånd. Ingen egen farge er definert her: en sang
   er ikke en status, og grønn, amber, rød og violett betyr noe annet.

   INGEN BILDER. Albumbildene ligger på i.scdn.co, og CSP-en i
   statisk/_headers slipper bare inn våre egne. Et notetegn sier det samme,
   og sjekk-spotify.mjs stopper et bilde uten verten.
   ========================================================================== */

.topp-tittel .horer {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--s-1) var(--s-2);
  min-width: 0;
  margin-top: var(--s-1);
}

/* Navnet står foran bare i en kanal, der det kan være flere. */
.topp-tittel .horer .navn {
  flex: 0 0 auto;
  font-size: var(--t-2);
  line-height: var(--t-2-h);
  font-weight: 500;
  color: var(--ink-2);
}

/* Sangen. En lenke når Spotify ga oss adressen til den, ellers bare tekst,
   og de to skal se like rolige ut: forskjellen er at den ene kan trykkes. */
.topp-tittel .horer .sang {
  display: inline-flex;
  align-items: center;
  gap: var(--s-1);
  min-width: 0;
  max-width: 100%;
  font-size: var(--t-2);
  line-height: var(--t-2-h);
  color: var(--ink-3);
  text-decoration: none;
}
.topp-tittel .horer a.sang:hover { color: var(--ink); }
.topp-tittel .horer a.sang:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; border-radius: var(--r-1); }
.topp-tittel .horer .sang .tegn { flex: 0 0 auto; font-size: var(--t-1); line-height: 1; }
.topp-tittel .horer .sang .tittel { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Knappen er Lodds rolige variant. Den som følger nå, står i merkets farge:
   ingen flate, så raden ikke blir et kort i et kort. */
.topp-tittel .horer .knapp { flex: 0 0 auto; }
.topp-tittel .horer .knapp[aria-pressed="true"] { color: var(--brand); font-weight: 500; }

/* Setningen fra serveren: ingen aktiv enhet, ingen Premium, eller at du
   ikke følger lenger. Den brekker på flere linjer, fordi den skal kunne
   leses ferdig også på 375 px. */
.topp-tittel .horer .beskjed {
  flex: 1 1 100%;
  min-width: 0;
  font-size: var(--t-1);
  line-height: var(--t-1-h);
  color: var(--ink-3);
}

/* I panelet langs høyre kant er det trangt. Der står sangen uten navnet
   foran, fordi navnet står i raden man kom fra. */
@media (max-width: 1100px) {
  .chat:not(.full) .topp-tittel .horer .navn { display: none; }
}