/* ===============================================================
   GALA 2026 PLAYLIST (gala-2026-playlist.html only)
   Spotify-like player on the dark surface. Loads after gala.css,
   which supplies the bilingual switch, language toggle and footer.
   Mobile: track list + mini player; Now Playing opens full screen.
   Desktop (>= 1024px): Now Playing is a sticky side column.
   Zero hex literals: colours read the --gl-* tokens set on <body>.
   =============================================================== */

.pl-body {
  color: white;
  background: linear-gradient(to bottom, color-mix(in srgb, var(--gl-teal-deep) 50%, var(--gl-dark)) 0, var(--gl-dark) 30rem) no-repeat, var(--gl-dark);
  padding-bottom: 5.5rem; /* room for the mini player */
}
.pl-body :focus-visible { outline-color: var(--gl-teal-bright); }
.pl-body.pl-np-open { overflow: hidden; }
.pl-body .gl-prototype { position: relative; z-index: 1; }

/* Play/pause toggles: one set of icons + labels, switched by body.pl-playing */
.pl-body:not(.pl-playing) [data-pl-icon="pause"], .pl-body:not(.pl-playing) [data-pl-label="pause"],
.pl-body.pl-playing [data-pl-icon="play"], .pl-body.pl-playing [data-pl-label="play"] { display: none; }

.pl-ico { width: 1.5rem; height: 1.5rem; fill: currentColor; flex: none; }
.pl-ico__line { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* ---------- Header ---------- */
.pl-main { max-width: 40rem; margin: 0 auto; padding: 0 1.25rem 2rem; }
.pl-topbar { display: flex; align-items: center; justify-content: space-between; padding: 1rem 0; }
.pl-head { display: flex; flex-direction: column; align-items: center; gap: 1rem; padding: 0 0 0.5rem; text-align: center; }

/* Typographic cover: the songs have no artwork, so the cover is set in type on a stave */
.pl-cover {
  position: relative; width: min(8.5rem, 40vw); aspect-ratio: 1; flex: none; container-type: inline-size;
  display: flex; flex-direction: column; justify-content: space-between; padding: 0.75rem;
  border-radius: 1rem; text-align: left; color: var(--gl-dark);
  background: linear-gradient(135deg, var(--gl-teal-bright), var(--gl-teal) 55%, var(--gl-teal-deep));
  box-shadow: 0 24px 60px color-mix(in srgb, black 45%, transparent);
}
.pl-cover::before {
  content: ""; position: absolute; left: 0; right: 0; top: 46%; height: 24%;
  background: repeating-linear-gradient(to bottom, color-mix(in srgb, var(--gl-dark) 28%, transparent) 0 1px, transparent 1px 25%);
  border-bottom: 1px solid color-mix(in srgb, var(--gl-dark) 28%, transparent);
}
.pl-cover > span { position: relative; }
.pl-cover__small { font-size: 0.75rem; font-weight: 700; letter-spacing: 0.15em; text-transform: uppercase; }
.pl-cover__small { font-size: 0.6rem; }
/* Sized to the tile (cqi = 1% of its inner width) so the longest word, "Commissioned",
   keeps clear of the edges on small phones, including in Futura (iOS), which is wider
   than the Jost fallback. 0.875rem is the fallback for browsers without container units. */
.pl-cover__big { font-family: 'Futura', 'Jost', sans-serif; font-weight: 600; font-size: 0.875rem; font-size: 12cqi; line-height: 1; letter-spacing: -0.02em; }

.pl-head__kicker { color: var(--gl-teal-bright); margin-bottom: 0.5rem; }
.pl-head__h1 { font-family: 'Futura', 'Jost', 'Noto Sans TC', sans-serif; font-weight: 600; font-size: clamp(1.9rem, 8vw, 3.25rem); line-height: 1.05; letter-spacing: -0.02em; margin-bottom: 0.5rem; }
.pl-head__lede { color: color-mix(in srgb, white 78%, transparent); font-size: 0.875rem; line-height: 1.6; text-align: left; text-wrap: pretty; max-width: 40rem; margin: 0 auto; }
.pl-head__lede + .pl-head__lede { margin-top: 0.6rem; }
.pl-head__meta { font-size: 0.875rem; font-weight: 600; color: color-mix(in srgb, white 72%, transparent); }

.pl-actions { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 0.75rem 0 0.5rem 0.75rem; }

/* Round teal play buttons */
.pl-bigplay, .pl-npplay {
  display: inline-flex; align-items: center; justify-content: center; flex: none;
  width: 3.5rem; height: 3.5rem; border-radius: 9999px; border: 0; cursor: pointer;
  background: var(--gl-teal-bright); color: var(--gl-dark);
  transition: transform .15s ease, background-color .2s ease;
}
.pl-npplay { width: 4.25rem; height: 4.25rem; }
.pl-bigplay:hover, .pl-npplay:hover { transform: scale(1.05); background: var(--gl-teal); }
.pl-bigplay .pl-ico, .pl-npplay .pl-ico { width: 1.9rem; height: 1.9rem; }

.pl-icon-btn {
  display: inline-flex; align-items: center; justify-content: center; flex: none;
  width: 3rem; height: 3rem; border-radius: 9999px; border: 0; cursor: pointer;
  background: transparent; color: white; transition: background-color .2s ease;
}
.pl-icon-btn:hover { background: color-mix(in srgb, white 10%, transparent); }
.pl-icon-btn .pl-ico { width: 1.75rem; height: 1.75rem; }

/* ---------- Track list ---------- */
.pl-tracks { display: grid; gap: 0.25rem; }
.pl-tracks:focus { outline: none; }
.pl-row {
  width: 100%; display: grid; grid-template-columns: 3rem minmax(0, 1fr) auto; align-items: center; gap: 0.75rem;
  min-height: 3.5rem; padding: 0.4rem 0.75rem; border: 0; border-radius: 0.75rem;
  background: transparent; color: white; font: inherit; text-align: left; cursor: pointer;
  transition: background-color .2s ease;
}
.pl-row:hover { background: color-mix(in srgb, white 8%, transparent); }
.pl-track.is-current .pl-row { background: color-mix(in srgb, white 10%, transparent); }
/* Artwork thumbnail; songs without artwork get the staff-line tile */
.pl-row__art { position: relative; display: block; width: 3rem; aspect-ratio: 1; border-radius: 0.5rem; overflow: hidden; }
.pl-row__art img { width: 100%; height: 100%; object-fit: cover; }
.pl-tile {
  display: flex; width: 100%; height: 100%; align-items: center; justify-content: center;
  background: repeating-linear-gradient(to bottom, transparent 0 calc(20% - 1px), color-mix(in srgb, white 14%, transparent) calc(20% - 1px) 20%), linear-gradient(135deg, var(--gl-teal), var(--gl-teal-deep));
}
.pl-tile .pl-ico { width: 40%; height: 40%; color: color-mix(in srgb, white 85%, transparent); }
.pl-row__badge { display: block; font-size: 0.7rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--gl-teal-bright); }
/* Featured song: first, double-height card */
.pl-track--featured { margin-bottom: 0.5rem; }
.pl-track--featured .pl-row { grid-template-columns: 6rem minmax(0, 1fr) auto; min-height: 7.5rem; padding: 0.75rem; border-radius: 1.25rem; background: var(--gl-dark-accent); }
.pl-track--featured .pl-row__art { width: 6rem; }
.pl-track--featured .pl-row__title { font-family: 'Futura', 'Jost', 'Noto Sans TC', sans-serif; font-size: 1.2rem; line-height: 1.2; white-space: normal; }
.pl-track--soon .pl-row__time { font-size: 0.75rem; }
.pl-row__text { display: flex; flex-direction: column; min-width: 0; gap: 0.1rem; }
.pl-row__title, .pl-row__sub { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pl-row__title { white-space: normal; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; }
.pl-row__title { font-weight: 600; font-size: 1rem; }
.pl-track.is-current .pl-row__title { color: var(--gl-teal-bright); }
.pl-row__sub { font-size: 0.875rem; color: color-mix(in srgb, white 72%, transparent); }
.pl-row__time { font-size: 0.875rem; font-variant-numeric: tabular-nums; color: color-mix(in srgb, white 72%, transparent); }

/* Equaliser over the current row's artwork */
.pl-eq { display: none; position: absolute; inset: 0; align-items: center; justify-content: center; gap: 2px; padding: 30%; background: color-mix(in srgb, black 45%, transparent); }
.pl-eq span { width: 3px; height: 40%; border-radius: 1px; background: var(--gl-teal-bright); }
.pl-track.is-current .pl-eq { display: inline-flex; }
.pl-playing .pl-track.is-current .pl-eq span { animation: plEq 0.9s ease-in-out infinite alternate; }
.pl-playing .pl-track.is-current .pl-eq span:nth-child(2) { animation-delay: -0.3s; }
.pl-playing .pl-track.is-current .pl-eq span:nth-child(3) { animation-delay: -0.6s; }
@keyframes plEq { from { height: 25%; } to { height: 100%; } }

/* ---------- Now Playing (mobile: full-screen sheet) ---------- */
.pl-np {
  position: fixed; inset: 0; z-index: 50; overflow-y: auto;
  padding: 0 1.25rem calc(2rem + env(safe-area-inset-bottom));
  background: linear-gradient(to bottom, color-mix(in srgb, var(--gl-teal-deep) 45%, var(--gl-dark)), var(--gl-dark) 60%) var(--gl-dark);
  visibility: hidden; transform: translateY(100%);
  transition: transform .3s ease, visibility 0s linear .3s;
}
.pl-np.is-open { visibility: visible; transform: none; transition: transform .3s ease; }
.pl-np > * { max-width: 32rem; margin-left: auto; margin-right: auto; }
.pl-np__top { display: grid; grid-template-columns: 3rem minmax(0, 1fr) 3rem; align-items: center; padding: 0.75rem 0; }
.pl-np__h { text-align: center; font-size: 0.8rem; font-weight: 700; letter-spacing: 0.15em; text-transform: uppercase; color: color-mix(in srgb, white 80%, transparent); }

/* Song information card: replaces the rotating record */
.pl-card { position: relative; overflow: hidden; display: flex; flex-direction: column; gap: 0.35rem; padding: 1.75rem 1.5rem 1.5rem; border-radius: 2rem; background: var(--gl-dark-accent); }
.pl-card::before {
  content: ""; position: absolute; left: 0; right: 0; top: 1.5rem; height: 3rem;
  background: repeating-linear-gradient(to bottom, color-mix(in srgb, white 8%, transparent) 0 1px, transparent 1px 25%);
  border-bottom: 1px solid color-mix(in srgb, white 8%, transparent);
}
.pl-card > * { position: relative; }
.pl-card__art { margin: -0.25rem -0.25rem 1rem; border-radius: 1.25rem; overflow: hidden; aspect-ratio: 16 / 9; }
.pl-card__art img { width: 100%; height: 100%; object-fit: cover; }
/* Artwork whose aspect ratio is not 16:9 (album covers, headshots) is letterboxed
   on the dark ground instead of being cropped. Set per song with data-art-fit. */
.pl-card--art-contain .pl-card__art { background: var(--gl-dark); }
.pl-card--art-contain .pl-card__art img { object-fit: contain; }
.pl-card.has-art::before { display: none; }
.pl-card.has-art .pl-card__no { margin-bottom: 0.25rem; }
.pl-card__no { font-family: 'Futura', 'Jost', sans-serif; font-weight: 600; font-size: 0.9rem; letter-spacing: 0.1em; color: var(--gl-teal-bright); margin-bottom: 2.5rem; font-variant-numeric: tabular-nums; }
.pl-card__title { font-family: 'Futura', 'Jost', 'Noto Sans TC', sans-serif; font-weight: 600; font-size: clamp(1.75rem, 7vw, 2.4rem); line-height: 1.1; letter-spacing: -0.01em; text-wrap: balance; }
.pl-card__artist { font-weight: 500; color: color-mix(in srgb, white 88%, transparent); margin-top: 0.25rem; }
.pl-chips { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 1rem; }
.pl-chips li { padding: 0.3rem 0.85rem; border-radius: 9999px; border: 1px solid color-mix(in srgb, white 30%, transparent); font-size: 0.85rem; font-variant-numeric: tabular-nums; }
.pl-card__premiere { margin-top: 0.75rem; font-size: 0.875rem; color: color-mix(in srgb, white 72%, transparent); }

/* Scrubber + transport */
.pl-seek { margin-top: 1.5rem; }
.pl-seek__range { display: block; width: 100%; height: 2.75rem; margin: 0; background: transparent; accent-color: var(--gl-teal-bright); cursor: pointer; }
.pl-seek__times { display: flex; justify-content: space-between; font-size: 0.8rem; font-variant-numeric: tabular-nums; color: color-mix(in srgb, white 72%, transparent); }
.pl-npplay:disabled, .pl-miniplay:disabled, .pl-seek__range:disabled { opacity: 0.4; cursor: not-allowed; }
.pl-controls { display: flex; align-items: center; justify-content: center; gap: 2rem; margin-top: 0.75rem; margin-bottom: 2rem; }

/* Credits card: one labelled line per role */
.pl-credits { padding: 1.5rem; border-radius: 2rem; background: var(--gl-dark-accent); }
.pl-credits__h { font-family: 'Futura', 'Jost', 'Noto Sans TC', sans-serif; font-weight: 600; font-size: 1.15rem; margin-bottom: 1rem; }
.pl-credits__list { display: grid; gap: 1rem; }
.pl-credits__list dt { font-size: 0.8rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: color-mix(in srgb, white 72%, transparent); }
.pl-credits__list dd { margin-top: 0.15rem; font-size: 1.05rem; font-weight: 500; line-height: 1.4; }

/* ---------- Mini player (mobile) ---------- */
.pl-mini {
  position: fixed; z-index: 40; left: 0.5rem; right: 0.5rem; bottom: calc(0.5rem + env(safe-area-inset-bottom));
  display: flex; align-items: center; gap: 0.25rem; padding: 0.4rem 0.4rem 0.4rem 0;
  border-radius: 1rem; background: var(--gl-dark-accent); overflow: hidden;
  box-shadow: 0 -8px 30px color-mix(in srgb, black 30%, transparent);
}
.pl-mini__progress { position: absolute; left: 0.75rem; right: 0.75rem; bottom: 0; height: 2px; background: color-mix(in srgb, white 20%, transparent); }
.pl-mini__progress span { display: block; width: 0; height: 100%; background: var(--gl-teal-bright); }
.pl-mini__open {
  flex: 1; min-width: 0; display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "t i" "a i";
  align-items: center; column-gap: 0.5rem; min-height: 3.25rem; padding: 0.25rem 0.75rem;
  border: 0; background: transparent; color: white; font: inherit; text-align: left; cursor: pointer;
}
.pl-mini__title, .pl-mini__artist { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pl-mini__title { grid-area: t; font-weight: 600; font-size: 0.95rem; }
.pl-mini__artist { grid-area: a; font-size: 0.8rem; color: color-mix(in srgb, white 72%, transparent); }
.pl-mini__open .pl-ico { grid-area: i; width: 1.25rem; height: 1.25rem; color: color-mix(in srgb, white 72%, transparent); }

.pl-body .gl-footer { border-top: 1px solid color-mix(in srgb, white 10%, transparent); }

/* ---------- Desktop: two columns, Now Playing always visible ---------- */
@media (min-width: 1024px) {
  .pl-body { padding-bottom: 0; }
  .pl-layout { display: grid; grid-template-columns: minmax(0, 1fr) 24rem; gap: 2.5rem; max-width: 76rem; margin: 0 auto; padding: 0 2rem 4rem; }
  .pl-main { max-width: none; margin: 0; padding: 0; }
  .pl-head { flex-direction: row; align-items: flex-end; gap: 2rem; padding: 1.5rem 0 2rem; text-align: left; }
  .pl-head__lede { margin-left: 0; }
  .pl-cover { width: 14rem; padding: 1.1rem; }
  .pl-cover__small { font-size: 0.75rem; }
  .pl-cover__big { font-size: 1.7rem; }
  .pl-head__lede { margin-bottom: 0.25rem; }
  .pl-np__top { grid-template-columns: minmax(0, 1fr); }
  .pl-np__h { text-align: left; }
  .pl-np__spacer { display: none; }
  .pl-np {
    position: sticky; top: 1.5rem; inset: auto; z-index: auto; align-self: start;
    max-height: calc(100vh - 3rem); margin-top: 4.5rem; padding: 1rem 1.25rem 1.5rem; border-radius: 2rem;
    background: color-mix(in srgb, white 5%, var(--gl-dark));
    visibility: visible; transform: none; transition: none;
  }
  .pl-np__collapse, .pl-mini { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .pl-playing .pl-track.is-current .pl-eq span { animation: none; height: 70%; }
}