/* 2026-10-01 21:44 CEST - The playlists sidebar: a responsive Spotify link in the landing header, and a panel from the right
   listing Goeeng's weekly drops until the beta. Spotify's logo stays white, as the site holds no colour, and never
   smaller than the 21px Spotify allows, with half its height clear around it. site.css owns the voice, arrival
   and light. */

.spotify {
  flex: 0 0 auto;
  width: 22px;
  height: 22px;
  fill: currentColor;
}

/* ---- The header link: Spotify's logo in white, the word in grey. On a phone only the logo shows. ---- */

.top .playlists-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 11px;
  min-width: 44px;
  min-height: 44px;
  color: var(--ink-muted);
  font-size: var(--small);
  letter-spacing: 0.04em;
  text-decoration: none;
  transition: color 300ms var(--ease), transform 180ms var(--ease);
}

.playlists-link .spotify {
  color: var(--ink);
}

.playlists-link:hover,
.playlists-link:focus-visible {
  color: var(--ink);
}

/* ---- The panel: black, full height at the right edge, over a black scrim ---- */

.playlists {
  position: fixed;
  inset: 0 0 0 auto;
  width: min(440px, 100vw);
  max-width: 100vw;
  height: 100dvh;
  max-height: 100dvh;
  margin: 0;
  padding: 0;
  border: 0;
  border-left: 1px solid var(--line);
  background: var(--ground);
  color: var(--ink);
}

.playlists::backdrop {
  background: rgba(0, 0, 0, 0.55);
}

.playlists[open]::backdrop {
  animation: light-on var(--arrive-light) var(--arrive-ease) backwards;
}

.playlists-panel {
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow-y: auto;
  padding: max(16px, env(safe-area-inset-top)) 32px max(24px, env(safe-area-inset-bottom));
}

.playlists[open] .playlists-panel {
  animation: panel-in var(--arrive-support) var(--arrive-ease) backwards;
}

@keyframes panel-in {
  from {
    opacity: 0;
    transform: translateX(24px);
  }
}

.playlists-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 44px;
}

.playlists-head .spotify {
  width: 28px;
  height: 28px;
}

.playlists-close {
  min-width: 44px;
  min-height: 44px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--ink-muted);
  font: inherit;
  font-size: var(--small);
  letter-spacing: 0.04em;
  cursor: pointer;
  transition: color 300ms var(--ease);
}

.playlists-close:hover,
.playlists-close:focus-visible {
  color: var(--ink);
}

.playlists-title {
  margin-top: 40px;
  font-size: clamp(32px, 3.2vw, 40px);
}

/* ---- The drops: when, what and whether a city or an artist, one week a row; this week and named drops in white.
   A live drop's name is an underlined text link to Spotify that wraps like text. Its last word and the share icon
   never part, and its padding makes a 44px tap area without taking room. ---- */

.drops {
  margin: 40px 0 0;
  padding: 8px 0;
  border-block: 1px solid var(--line);
  list-style: none;
}

.drop {
  display: grid;
  grid-template-columns: 6.5em 1fr;
  column-gap: 16px;
  align-items: baseline;
  padding: 10px 0;
}

.drop-when,
.drop-series {
  font-size: var(--small);
  letter-spacing: 0.04em;
  color: var(--ink-muted);
}

.drop-when {
  grid-row: span 2;
}

.drop-name {
  font-size: var(--body);
  letter-spacing: 0.02em;
  color: var(--ink-muted);
}

.drop-series {
  grid-column: 2;
}

.drop.is-now .drop-when,
.drop.is-named .drop-name {
  color: var(--ink);
}

.drop-name a {
  padding-block: 13px;
  color: inherit;
  text-decoration: underline;
  text-decoration-color: var(--line);
  text-underline-offset: 4px;
  transition: text-decoration-color 300ms var(--ease);
}

.drop-name a:hover,
.drop-name a:focus-visible {
  text-decoration-color: var(--ink);
}

.drop-tail {
  white-space: nowrap;
}

.share {
  width: 14px;
  height: 14px;
  margin-left: 6px;
  vertical-align: -1px;
  fill: currentColor;
  transition: transform 180ms var(--ease);
}

@media (prefers-reduced-motion: no-preference) and (hover: hover) and (pointer: fine) {
  .playlists-link:hover {
    transform: translateY(-2px);
  }

  .drop-name a:hover .share {
    transform: translate(2px, -2px);
  }
}

@media (prefers-reduced-motion: no-preference) {
  .drop-name a:focus-visible .share {
    transform: translate(2px, -2px);
  }
}

@media (max-width: 600px) {
  /* The logo alone keeps its 44px tap area by reaching into the header's gaps, so the mark beside it never shrinks. */
  .top .playlists-link {
    margin-inline: -11px;
  }

  .playlists-link .playlists-label {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
  }

  .playlists-panel {
    padding-inline: var(--gutter);
  }
}

/* The narrowest phones close the header's gaps a little, so the logo fits beside the mark at its full size. */
@media (max-width: 360px) {
  .landing .top {
    gap: 12px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .top .playlists-link,
  .share { transition: none; }

  .playlists[open]::backdrop,
  .playlists[open] .playlists-panel {
    animation: none;
  }
}