/* /assets/css/playlist.css - /playlist/ page (SAM template _recently.html), single stylesheet
   Part 1: frame, header, footer, background - same values as /assets/css/site.css + style.css
           (header, width and footer must stay identical to the other pages).
   Part 2: track list in the style of the web player (Manrope, covers 4/6 px, stars).
   Version 1.0.0 (13.10.2026) */

@font-face{
  font-family: "Manrope";
  font-style: normal; font-weight: 200 800; font-display: swap;
  src: url("/webplayer/fonts/manrope-latin-wght-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face{
  font-family: "Manrope";
  font-style: normal; font-weight: 200 800; font-display: swap;
  src: url("/webplayer/fonts/manrope-latin-ext-wght-normal.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ============================== Part 1: frame (as today) */
:root{
  --text: rgba(255,255,255,.92);
  --muted: rgba(255,255,255,.72);
  --faint: rgba(255,255,255,.55);
  --line: rgba(255,255,255,.12);
  --glass: rgba(20,24,34,.62);
  --glass2: rgba(20,24,34,.48);
  --shadow: 0 18px 60px rgba(0,0,0,.35);
  --radius: 18px;
  --page-card-width: 880px;
  --daily-bg: none;
  --daily-bg-pos: center center;
  --onair: #C62828;
  --star: #B8963C;
  --star-base: rgba(255,255,255,.20);
  --sys: "Manrope", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;   /* Manrope on all pages since 13.10.2026 */
  --ui: "Manrope", system-ui, sans-serif;
}
*{ box-sizing: border-box; }
html, body{ height: 100%; }
html{ background: #05070d; }
body{ margin: 0; font-family: var(--sys); color: var(--text); background: none; position: relative; }
a{ color: inherit; }

body::before{
  content: ""; position: fixed; inset: 0; z-index: -2;
  background-image: var(--daily-bg); background-position: var(--daily-bg-pos);
  background-size: cover; background-repeat: no-repeat; transform: translateZ(0);
}
html.bg-fallback body::before{
  background-image: url("https://lounge-radio.com/images/background.jpg");
  background-position: center center;
}
body::after{
  content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background: radial-gradient(ellipse at center, rgba(0,0,0,.20) 0%, rgba(0,0,0,.55) 70%, rgba(0,0,0,.70) 100%);
}

.wrap{ min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 26px 14px 26px; }

.page-card{
  width: min(var(--page-card-width), 100%);
  margin-left: auto; margin-right: auto;
  background: linear-gradient(180deg, var(--glass), var(--glass2));
  border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  padding: 28px 22px 20px;
  overflow: hidden; isolation: isolate;
}

.logo{
  display: block; max-width: 640px; width: 92%; height: auto;
  aspect-ratio: 1024 / 98; margin: 0 auto 14px;
  filter: drop-shadow(0 10px 22px rgba(0,0,0,.45));
}

.topbar{ display: flex; gap: 12px; align-items: flex-end; justify-content: space-between; flex-wrap: wrap; margin-bottom: 14px; }
h1{ margin: 0; font-size: 22px; font-weight: 800; letter-spacing: .02em; text-align: left; }
.subnote{ color: var(--muted); font-size: 12px; margin-top: 4px; }

/* footer */
.footer-zone{ display: flex; flex-direction: column; }
.footer-zone-divider{ order: 2; height: 1px; background: rgba(255,255,255,.14); margin: 16px 0; }
.footer-zone-copy{ order: 3; text-align: center; color: rgba(255,255,255,.70); font-size: 13px; letter-spacing: .02em; padding: 4px 0 0; margin-top: 12px; }
.bottom-nav{ order: 1; width: 100%; margin-top: 18px; }
.bottom-nav .inner{ max-width: var(--page-card-width); margin: 0 auto; }
.navlink{
  flex: 1 1 auto; min-width: 120px; text-align: center; padding: 10px 10px; border-radius: 12px;
  border: 1px solid rgba(255,255,255,.10); background: rgba(255,255,255,.06);
  color: rgba(255,255,255,.85); font-weight: 800; font-size: 13px; text-decoration: none;
  transition: transform .08s ease, background .08s ease, border-color .08s ease;
}
.navlink:hover{ border-color: rgba(255,255,255,.26); background: rgba(255,255,255,.09); transform: translateY(-1px); }
.navlink.active{ border-color: rgba(255,255,255,.28); background: rgba(255,255,255,.12); }
@media (max-width: 899px){
  .bottom-nav .inner{ display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
  .bottom-nav .navlink{ width: 100%; min-width: 0; flex: none; }
}
@media (min-width: 900px){
  .bottom-nav .inner{ display: flex; gap: 12px; flex-wrap: nowrap; justify-content: space-between; }
  .bottom-nav .navlink{ flex: 1 1 0; min-width: 0; }
}
@media (max-width: 520px){ h1{ font-size: 18px; } }

/* ============================== Part 2: list (web player style) */
.pl{ font-family: var(--ui); display: flex; flex-direction: column; gap: 24px; padding-top: 8px; }
.pl-section{ display: flex; flex-direction: column; gap: 10px; }
.pl-head{ display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.pl-h2{ margin: 0; font-family: var(--sys); font-size: 13px; font-weight: 800; letter-spacing: .10em; text-transform: uppercase; color: rgba(255,255,255,.78); }
.pl-day{ font-size: 12px; color: var(--faint); }

/* one row = grid; the same markup works on desktop (time + stars right) and phone (stars under the title) */
.trk, .nxt{
  display: grid; grid-template-columns: 56px minmax(0, 1fr) auto;
  grid-template-areas: "cover artist when" "cover title rate" "cover album rate";
  column-gap: 14px; row-gap: 2px; align-items: center;
}
.cover{ grid-area: cover; align-self: center; display: block; width: 56px; height: 56px; border-radius: 4px; object-fit: cover; background: rgba(255,255,255,.06); box-shadow: 0 0 0 1px rgba(255,255,255,.10); }
.artist, .title, .album{ min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.artist{ grid-area: artist; font-weight: 600; font-size: 16px; }
.title{ grid-area: title; color: var(--muted); font-size: 14px; }
.album{ grid-area: album; color: var(--faint); font-size: 12px; }
.album:empty{ display: none; }
.when{ grid-area: when; justify-self: end; font-size: 13px; color: var(--muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
.rate{ grid-area: rate; justify-self: end; align-self: center; }
/* times: SAM writes the full date, playlist.js shortens it to HH:MM - hidden until then (no flash on F5; without JS the date stays visible) */
.js-pl:not(.pl-ready) .trk .when{ visibility: hidden; }

/* coming next */
.nxt{ grid-template-columns: 72px minmax(0, 1fr) auto; column-gap: 16px; padding: 14px; border-radius: 14px; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.10); }
.nxt .cover{ width: 72px; height: 72px; border-radius: 6px; }
.nxt .artist{ font-size: 17px; }
.nxt .title{ font-size: 15px; }
.nxt .album{ font-size: 13px; }
.nxt .when{ font-weight: 600; color: var(--text); padding: 4px 10px; border-radius: 999px; background: rgba(255,255,255,.10); }

/* recently played */
.pl-list{ list-style: none; margin: 0; padding: 0; border-radius: 14px; overflow: hidden; background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.10); }
.trk{ padding: 12px 14px; border-top: 1px solid rgba(255,255,255,.08); }
.pl-list > :first-child{ border-top: 0; }
.trk:hover{ background: rgba(255,255,255,.04); }
.trk.on-air{ background: rgba(255,255,255,.06); }
.daysep{ padding: 8px 14px; border-top: 1px solid rgba(255,255,255,.08); font-size: 12px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--faint); background: rgba(255,255,255,.03); }
.pl-list:not(.expanded) > .more-hidden{ display: none; }

.onair{ display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 700; letter-spacing: .06em; color: #fff; background: var(--onair); padding: 3px 9px; border-radius: 999px; }
.onair::before{ content: ""; width: 6px; height: 6px; border-radius: 50%; background: #fff; }
.onair.dim::before{ opacity: .35; }   /* blink driven by playlist.js (1 s): a CSS animation makes Firefox recomposite the blurred card every frame */
@media (prefers-reduced-motion: reduce){ .onair.dim::before{ opacity: 1; } }

/* stars without JS: class r0..r10 comes from SAM ($history.rating$, half stars) */
.rate{ display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--muted); font-variant-numeric: tabular-nums; }
.rate > i{ position: relative; display: block; width: 78px; height: 14px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 78 14' fill='rgba(255,255,255,.20)'%3E%3Cpath transform='translate(0 0) scale(.5833)' d='M12 1.8l3.1 6.6 7.2.9-5.3 5 1.4 7.1L12 17.9l-6.4 3.5 1.4-7.1-5.3-5 7.2-.9z'/%3E%3Cpath transform='translate(16 0) scale(.5833)' d='M12 1.8l3.1 6.6 7.2.9-5.3 5 1.4 7.1L12 17.9l-6.4 3.5 1.4-7.1-5.3-5 7.2-.9z'/%3E%3Cpath transform='translate(32 0) scale(.5833)' d='M12 1.8l3.1 6.6 7.2.9-5.3 5 1.4 7.1L12 17.9l-6.4 3.5 1.4-7.1-5.3-5 7.2-.9z'/%3E%3Cpath transform='translate(48 0) scale(.5833)' d='M12 1.8l3.1 6.6 7.2.9-5.3 5 1.4 7.1L12 17.9l-6.4 3.5 1.4-7.1-5.3-5 7.2-.9z'/%3E%3Cpath transform='translate(64 0) scale(.5833)' d='M12 1.8l3.1 6.6 7.2.9-5.3 5 1.4 7.1L12 17.9l-6.4 3.5 1.4-7.1-5.3-5 7.2-.9z'/%3E%3C/svg%3E") 0 0 / 78px 14px no-repeat; }
.rate > i::before{ content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 0; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 78 14' fill='%23B8963C'%3E%3Cpath transform='translate(0 0) scale(.5833)' d='M12 1.8l3.1 6.6 7.2.9-5.3 5 1.4 7.1L12 17.9l-6.4 3.5 1.4-7.1-5.3-5 7.2-.9z'/%3E%3Cpath transform='translate(16 0) scale(.5833)' d='M12 1.8l3.1 6.6 7.2.9-5.3 5 1.4 7.1L12 17.9l-6.4 3.5 1.4-7.1-5.3-5 7.2-.9z'/%3E%3Cpath transform='translate(32 0) scale(.5833)' d='M12 1.8l3.1 6.6 7.2.9-5.3 5 1.4 7.1L12 17.9l-6.4 3.5 1.4-7.1-5.3-5 7.2-.9z'/%3E%3Cpath transform='translate(48 0) scale(.5833)' d='M12 1.8l3.1 6.6 7.2.9-5.3 5 1.4 7.1L12 17.9l-6.4 3.5 1.4-7.1-5.3-5 7.2-.9z'/%3E%3Cpath transform='translate(64 0) scale(.5833)' d='M12 1.8l3.1 6.6 7.2.9-5.3 5 1.4 7.1L12 17.9l-6.4 3.5 1.4-7.1-5.3-5 7.2-.9z'/%3E%3C/svg%3E") 0 0 / 78px 14px no-repeat; }
.rate::after{ min-width: 22px; text-align: right; }
/* stars only, no number; r0 = not rated yet: 5 grey stars (like the web player) */
.r1 > i::before{ width: 8.97%; }
.r2 > i::before{ width: 20.51%; }
.r3 > i::before{ width: 29.49%; }
.r4 > i::before{ width: 41.03%; }
.r5 > i::before{ width: 50.00%; }
.r6 > i::before{ width: 61.54%; }
.r7 > i::before{ width: 70.51%; }
.r8 > i::before{ width: 82.05%; }
.r9 > i::before{ width: 91.03%; }
.r10 > i::before{ width: 100%; }
.rate[class="rate r"], .rate[class="rate"]{ display: none; }   /* no value from SAM: show nothing */
/* jingles, station IDs, promos, news, ads etc. cannot be rated: no stars (SAM songtype, S = song) */
:is([data-type="I"], [data-type="J"], [data-type="P"], [data-type="N"], [data-type="V"], [data-type="X"], [data-type="A"], [data-type="C"]) .rate{ display: none; }

.pl-more{ align-self: center; margin-top: 4px; min-height: 44px; padding: 0 22px; border-radius: 999px; background: rgba(255,255,255,.12); color: var(--text); border: 1px solid rgba(255,255,255,.22); font: inherit; font-size: 14px; font-weight: 600; cursor: pointer; }
.pl-more:hover{ background: rgba(255,255,255,.18); }
.pl-more:focus-visible, .navlink:focus-visible{ outline: 2px solid rgba(255,255,255,.55); outline-offset: 3px; }

@media (max-width: 520px){
  .pl{ gap: 20px; padding-top: 6px; }
  .trk, .nxt{
    grid-template-columns: 52px minmax(0, 1fr) auto; column-gap: 12px; row-gap: 3px;
    grid-template-areas: "cover artist when" "cover title title" "cover rate rate";
  }
  .album{ display: none; }
  .rate{ justify-self: start; }
  .trk{ padding: 10px; }
  .cover{ width: 52px; height: 52px; }
  .nxt{ padding: 10px; border-radius: 12px; }
  .nxt .cover{ width: 56px; height: 56px; border-radius: 4px; }
  .artist, .nxt .artist{ font-size: 15px; }
  .title, .nxt .title{ font-size: 13px; }
  .when{ font-size: 12px; }
  .onair{ font-size: 11px; padding: 2px 8px; }
  .pl-list{ border-radius: 12px; }
  .rate{ font-size: 11px; }
  .rate > i{ width: 72px; height: 13px; background-size: 72px 13px; }
  .rate > i::before{ background-size: 72px 13px; }
}