/*! TÄHTI — the music vertical (single artist / single album, both archives).
    Loaded after tahti.css, tables.css and — on the two single templates —
    profile.css, and only on those five templates.

    Scope: ONLY the pieces the music pages genuinely add. The dashboard shell,
    the sticky identity panel, the tab strip, the completeness meter, the fact
    grid, .t-pill, table.dtable, .toplist, .card, .grid4 and the section heads
    all come from profile.css / tables.css / tahti.css and are deliberately
    absent here. Nothing above is redefined.

    New here: the song chart inside a panel (.trk*), the release grid (.alb*),
    the running-time footer of a tracklist, and the A–Z headings on the artist
    directory. Class names and custom properties carry their own prefixes so
    they can never collide with the three stylesheets underneath. */

/* ==========================================================================
   1. TOKENS
   ========================================================================== */
:root{
  --mu-gold:linear-gradient(90deg,var(--brand),#F26522);
  --mu-cover:118px;
}

/* ==========================================================================
   2. SONG CHART — the artist page's headline tab
      Reads as a chart: a big rank, a stream bar and the peak position, never
      as a spreadsheet. Every cell inside a row is optional, so the row is a
      three-column grid and the trailing cells collapse on their own.
   ========================================================================== */
.trk-body{padding-top:6px}

.trk{margin:0;padding:0;list-style:none;counter-reset:none}

.trk-row{
  display:grid;grid-template-columns:44px minmax(0,1fr) auto;
  gap:14px;align-items:center;
  padding:12px 2px;border-bottom:1px solid var(--line-soft);
}
.trk-row:last-child{border-bottom:0}
.trk-row:hover{background:rgba(var(--brand-rgb),.035)}

.trk-pos{
  font-size:25px;font-weight:900;letter-spacing:-.05em;line-height:1;
  color:var(--brand);text-align:center;font-variant-numeric:tabular-nums;
}
/* Past the podium the rank stops shouting. */
.trk-row:nth-child(n+4) .trk-pos{color:#C9C9D2;font-size:22px}

.trk-main{min-width:0}
.trk-t{
  font-size:15.5px;font-weight:900;letter-spacing:-.02em;line-height:1.25;
  color:var(--ink);margin:0;
}
.trk-s{
  display:flex;flex-wrap:wrap;align-items:center;gap:5px 10px;
  margin:3px 0 0;font-size:12px;font-weight:700;color:var(--muted);
}
.trk-s a{color:var(--link);font-weight:800}
.trk-s a:hover{text-decoration:underline}
.trk-s .trk-dur{font-variant-numeric:tabular-nums}

.trk-bar{height:6px;border-radius:999px;background:#EDEDF3;overflow:hidden;margin-top:8px;max-width:340px}
.trk-bar i{
  display:block;height:100%;width:0;border-radius:999px;
  background:var(--pf-duo,linear-gradient(90deg,var(--brand),var(--c-julkkis)));
  transition:width 1s var(--ease,cubic-bezier(.2,.7,.3,1));
}

.trk-side{display:flex;align-items:center;gap:12px;justify-content:flex-end;white-space:nowrap}
.trk-str{display:block;text-align:right}
.trk-str b{
  display:block;font-size:16px;font-weight:900;letter-spacing:-.03em;line-height:1.1;
  font-variant-numeric:tabular-nums;
}
.trk-str span{font-size:10px;font-weight:900;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}

/* ==========================================================================
   3. TRACKLIST — the album page's table, and its running-time footer
   ========================================================================== */
.trk-name{font-weight:800;letter-spacing:-.015em;margin-right:8px}

.panel table.dtable tfoot th,
.panel table.dtable tfoot td{
  padding:13px 18px;border-top:2px solid var(--line);
  font-size:12px;font-weight:900;letter-spacing:.06em;text-transform:uppercase;
  color:var(--ink-2);text-align:left;font-variant-numeric:tabular-nums;
}

/* ==========================================================================
   4. RELEASE GRID — discography cards, and "more by" under both columns
   ========================================================================== */
.alb-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(var(--mu-cover),1fr));gap:18px 16px}
.pf-foot .alb-grid{margin-top:14px}

.alb{min-width:0}
.alb-link{display:block}
.alb-link .ph{border-radius:12px;margin-bottom:9px;box-shadow:var(--sh,0 6px 18px rgba(14,14,18,.08))}
.alb-t{
  font-size:14px;font-weight:900;letter-spacing:-.02em;line-height:1.25;
  transition:color .18s;
}
.alb-link:hover .alb-t{color:var(--brand)}

.alb-top{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin:6px 0 0}
.alb-y{font-size:12px;font-weight:800;color:var(--muted);font-variant-numeric:tabular-nums}

.alb-m{
  display:flex;flex-wrap:wrap;gap:4px 10px;margin:4px 0 0;
  font-size:11.5px;font-weight:700;color:var(--muted);font-variant-numeric:tabular-nums;
}

/* ==========================================================================
   5. DIRECTORY — the A–Z headings on the artist archive
   ========================================================================== */
.az-block{margin-bottom:26px}
.az-h{
  font-size:19px;font-weight:900;letter-spacing:-.02em;line-height:1;
  color:var(--brand);text-transform:none;
}

/* ==========================================================================
   6. RESPONSIVE — matched to profile.css: below 900px the sticky panel has
      already unstuck and stacked, so the song chart drops its bar and the
      release grid tightens.
   ========================================================================== */
@media(max-width:900px){
  :root{--mu-cover:104px}
  .trk-row{grid-template-columns:36px minmax(0,1fr) auto;gap:10px}
  .trk-pos{font-size:21px}
  .trk-row:nth-child(n+4) .trk-pos{font-size:19px}
  .trk-bar{max-width:none}
}
@media(max-width:620px){
  :root{--mu-cover:92px}
  .trk-body{padding-left:16px;padding-right:16px}
  .trk-t{font-size:14.5px}
  .trk-bar{display:none}
  .trk-side{gap:8px}
  .trk-str b{font-size:14px}
  .alb-grid{gap:14px 12px}
}

@media (prefers-reduced-motion:reduce){
  .trk-bar i,.alb-t{transition:none!important}
}