/* ─────────────────────────────────────────────────────────────────────────────
   /lyttar — dei formene seksjonen teiknar som skalet ikkje har.

   Same tosidige oppsettet /blogg har (blogg.css + kort.css) og /tuben fekk i
   #242 (tuben.css + graf.css): paletten for seg, forma for seg. Ingen farge
   her — kvar verdi er ein var(--…).

   Lastrekkjefølgje: /seksjon.css → /lyttar/lyttar.css → DENNE.
   ───────────────────────────────────────────────────────────────────────────── */

/* ── Ei rad med eit omslag ──────────────────────────────────────────────────
   Artistar og album ser like ut, av di dei ER like: eit bilete, eit namn, eit
   tal. Éin form, to bruk. */
.ly-rad { display: grid; grid-template-columns: 2.1rem 44px 1fr auto; align-items: center; gap: 11px; padding: 8px 0; border-bottom: 1px solid var(--line); }
.ly-rad:last-child { border-bottom: 0; }
.ly-plass { font: 700 0.85rem var(--font-lab); color: var(--muted); text-align: right; }
.ly-bilete { width: 44px; height: 44px; border-radius: 6px; overflow: hidden; background: var(--well); flex: none; }
/* Ein artist utan omslag skal lesa som eit TOMROM, ikkje som ein svart
   firkant. Rader utan bilete er ikkje eit kantfall — oppstraums sender
   null for fleire av dei mest spela. */
.ly-bilete:empty { background: transparent; }
.ly-bilete img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ly-namn { min-width: 0; }
.ly-namn a, .ly-namn > span { display: block; color: var(--ink); text-decoration: none; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ly-namn a:hover { color: var(--varm); }
.ly-under { display: block; color: var(--muted); font-size: 0.82rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ly-tal { font: 700 0.95rem var(--font-lab); color: var(--varm); white-space: nowrap; }

/* ── Varmekartet: år × månad ────────────────────────────────────────────────
   Ei celle er ein månad. Fyllet er kor mykje, og det er KALDT — det er noko
   maskina talde. Den løpande månaden er skravert og merkt, men står i lista
   som alle andre (#226). */
.ly-kart { display: grid; grid-template-columns: 2.6rem repeat(12, 1fr); gap: 3px; align-items: center; }
.ly-kart-merke { font: 600 0.72rem var(--font-lab); color: var(--muted); }
.ly-celle { aspect-ratio: 1; border-radius: 3px; background: var(--well); border: 1px solid transparent; display: block; text-decoration: none; }
.ly-celle:hover, .ly-celle:focus-visible { border-color: var(--varm); }
.ly-celle--tom { opacity: 0.35; }
/* Den løpande månaden: skravert OG med kant, so han er tydeleg i eit rutenett
   der ei celle berre er ein farge. */
.ly-celle--loepande { border-color: var(--varm); }

/* ── Ein stolpe som er DEL AV ALT ───────────────────────────────────────────
   Same spørsmålet /tog/arkiv sin år-fane svarar på (ADR 0030): kor stor del av
   alt eg har høyrt skjedde her. Difor er nemnaren totalen, ikkje det største
   året. */
.ly-spor { display: block; height: 0.4rem; border-radius: 999px; background: var(--well); overflow: hidden; margin-top: 5px; }
.ly-stolpe { display: block; height: 100%; border-radius: 999px; background: var(--kald); }
.ly-stolpe--loepande { background: var(--kald); opacity: 0.75; }

/* ── Figurrada ──────────────────────────────────────────────────────────────*/
.ly-figurar { display: grid; grid-template-columns: repeat(auto-fit, minmax(8rem, 1fr)); gap: 12px; }
.ly-figur .sek-tal { display: block; font-size: clamp(1.5rem, 3vw, 2rem); }
.ly-merke { display: block; margin-top: 2px; font: 600 0.78rem var(--font-lab); letter-spacing: 0.05em; text-transform: uppercase; color: var(--muted); }

/* ── Navkorta ───────────────────────────────────────────────────────────────*/
.ly-navkort { margin-top: 14px; }
.ly-navkort a { display: flex; align-items: center; gap: 13px; background: var(--panel); border: 1px solid var(--line); border-radius: 14px; padding: 15px; min-height: 44px; color: var(--ink); text-decoration: none; }
.ly-navkort a:hover { border-color: var(--kald); }
.ly-navkort .ikon { font-size: 1.35rem; line-height: 1; flex: none; }
.ly-navkort .tekst { min-width: 0; }
.ly-navkort .namn { display: block; font-family: var(--font-disp); font-weight: 600; font-size: 1.05rem; }
.ly-navkort .sub { display: block; color: var(--muted); font-size: 0.82rem; }
.ly-navkort .pil { margin-left: auto; color: var(--kald); font-size: 1.1rem; flex: none; }

/* ── Heltebiletet ───────────────────────────────────────────────────────────
   Ikkje eit fotografi: seksjonen har ingen. Rillene på ei plate, teikna med
   ein repeterande gradient og ingen henting — same argumentet /blogg gjer med
   linjert papir. */
.ly-hero { position: relative; }
.ly-plate { position: relative; width: 100%; height: clamp(140px, 20vh, 210px); border-bottom: 1px solid var(--line); background: repeating-radial-gradient(circle at 50% 140%, rgba(var(--varm-rgb), 0.10) 0 2px, rgba(var(--varm-rgb), 0) 2px 7px), linear-gradient(180deg, var(--bg-2) 0%, var(--panel) 100%); }
.ly-hero-skrim { position: absolute; inset: 0; pointer-events: none; background: var(--hero-scrim); }
.ly-hero-plate { position: absolute; left: 0; right: 0; bottom: 0; }
.ly-hero-plate .inner { width: var(--page); margin: 0 auto; padding: 0 var(--gutter) 14px; }