/* ---------------------------------------------------------------------------
   Der Daiwel steet virun der Dier — playlist pages
   One stylesheet for every playlist. Change it here and all of them follow.
   Linked as  /radio/playlists/playlist.css  so it works from any year folder.
   --------------------------------------------------------------------------- */
:root{
  --bg:#0E1626;
  --panel:#17223A;
  --line:rgba(150,175,220,.16);
  --text:#E9EFFA;
  --muted:#8FA3C6;
  --dim:#63779B;
  --accent:#E0A32E;
  --new:#7FB63F;
  --focus:#9BC2FF;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--bg);color:var(--text);
  font-family:Barlow,"Segoe UI",system-ui,-apple-system,sans-serif;
  font-size:16px;line-height:1.45;font-variant-numeric:tabular-nums;
}
a{color:inherit}
:focus-visible{outline:2px solid var(--focus);outline-offset:2px;border-radius:4px}
.wrap{max-width:960px;margin:0 auto;padding:0 16px 64px}

/* ---------- masthead ---------- */
.mast{padding:34px 0 18px;border-bottom:1px solid var(--line)}
.mast a.home{text-decoration:none}
.mast h1{
  font-family:Oswald,"Arial Narrow",sans-serif;font-weight:600;
  font-size:clamp(22px,4.6vw,36px);line-height:1.05;letter-spacing:.01em;
  margin:0;text-transform:uppercase;
}
.mast a.home:hover h1{color:var(--accent)}
.mast h2{
  font-family:Oswald,sans-serif;font-weight:400;text-transform:uppercase;
  letter-spacing:.16em;font-size:13px;color:var(--accent);margin:9px 0 0;
}
.legend{margin:14px 0 0;color:var(--dim);font-size:13px}
.legend b{color:var(--text);font-weight:600}

/* ---------- track list ---------- */
table{width:100%;border-collapse:collapse;margin-top:22px}
caption{text-align:left;font-size:0;height:0;overflow:hidden}
th{
  font-family:Oswald,sans-serif;font-weight:500;font-size:11.5px;
  letter-spacing:.12em;text-transform:uppercase;color:var(--muted);
  text-align:left;padding:0 12px 9px;border-bottom:1px solid var(--line);
}
th.num{width:44px;text-align:right}
td{padding:9px 12px;border-bottom:1px solid var(--line);vertical-align:top}
td.num{text-align:right;color:var(--dim);font-family:Oswald,sans-serif;font-size:14px;width:44px}
td.artist{color:var(--text);width:24%}
td.artist b{font-weight:600;color:var(--text)}
tr.new td.artist{position:relative}
tr.new td.artist b::after{
  content:"";display:inline-block;width:5px;height:5px;border-radius:50%;
  background:var(--new);vertical-align:middle;margin-left:7px;
}
td.title{color:var(--muted);width:26%}
td.album{color:var(--muted);width:26%}
td.label{color:var(--dim);width:20%}
tbody tr:hover td{background:var(--panel)}

/* ---------- interview ---------- */
.interview{
  margin:26px 0 0;padding:14px 16px;border:1px solid var(--line);
  border-left:3px solid var(--accent);border-radius:0 10px 10px 0;
  background:var(--panel);font-size:15px;color:var(--muted);
}
.interview b{color:var(--text);font-weight:600}

footer{margin-top:34px;padding-top:16px;border-top:1px solid var(--line);
  font-size:13px;color:var(--dim)}
footer a{color:var(--muted)}

/* ---------- phones: the table restacks into cards ---------- */
@media (max-width:700px){
  table,thead,tbody,tr,td{display:block;width:auto}
  thead{display:none}
  tbody tr{
    border-bottom:1px solid var(--line);padding:11px 0 11px 40px;position:relative;
  }
  tbody tr td{border:none;padding:1px 0}
  td.num{
    position:absolute;left:0;top:11px;width:32px;text-align:left;padding:0;
  }
  td.artist{font-size:16px}
  td.title::before,td.album::before,td.label::before{
    content:attr(data-l);display:inline-block;min-width:52px;
    font-family:Oswald,sans-serif;font-size:10.5px;letter-spacing:.1em;
    text-transform:uppercase;color:var(--dim);
  }
  tbody tr:hover td{background:none}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important}}

/* ---------- print ---------- */
@media print{
  body{background:#fff;color:#000}
  .legend,footer{display:none}
  td,th{border-color:#ccc}
  td.artist,td.title,td.album,td.label{color:#000}
  .interview{background:none;border-color:#999}
  tr.new td.artist b::after{background:#000}
}