/* Approved V4 basis: c99d6cdb, client/public./app.css.
   Landscape photographs, compact seek strip and an expanded bottom panel.
   The current Luna palette and 44px controls replace only the old palette/small targets. */

.cover,
.track-cover {
  display: block;
  flex-shrink: 0;
  width: 84px;
  height: 43px;
  overflow: hidden;
  border: 1px solid rgba(219, 226, 250, .32);
  border-radius: 5px;
  background-image: url('./art/covers-v4.png');
  background-size: 300% 200%;
  background-repeat: no-repeat;
  background-position: 0 0;
  object-fit: cover;
}

/* V4 has six photographs and cycles them modulo six. */
.cover-0, .cover-6 { background-position: 0 0; }
.cover-1, .cover-7 { background-position: 50% 0; }
.cover-2, .cover-8 { background-position: 100% 0; }
.cover-3 { background-position: 0 100%; }
.cover-4 { background-position: 50% 100%; }
.cover-5 { background-position: 100% 100%; }

#products.track-list {
  padding: 4px 14px;
  background: rgba(12, 22, 34, .38);
  border-color: rgba(255, 255, 255, .16);
  color: #fff;
}
#products .track {
  display: flex;
  direction: ltr;
  align-items: center;
  gap: 12px;
  width: 100%;
  min-height: 64px;
  padding: 8px 0;
  text-align: start;
  color: inherit;
}
#products .track + .track { border-top: 1px solid rgba(255, 255, 255, .10); }
#products .track .track-cover { width: 84px; height: 43px; }
#products .track-copy {
  flex: 1;
  min-width: 0;
  font-size: 17px;
  line-height: 1.5;
  overflow-wrap: break-word;
}
#products[dir='rtl'] .track-copy { direction: rtl; text-align: right; }
#products[dir='ltr'] .track-copy { direction: ltr; text-align: left; }
#products .track-copy small { font-size: 12px; line-height: 1.5; }
#products .track-duration { display: none; }
#products .track-play {
  display: grid;
  place-items: center;
  flex-shrink: 0;
  width: 28px;
  min-height: 44px;
}
#products .track-play svg { width: 20px; height: 20px; }
#products .track[aria-current='true'] { color: var(--gold, #F2D170); }
#products .track[aria-current='true'] .track-cover {
  outline: 1px solid var(--gold, #F2D170);
  outline-offset: 2px;
}

#player {
  --player-ink: #fff;
  --player-muted: rgba(235, 235, 245, .78);
  --player-line: rgba(255, 255, 255, .20);
  --player-fill: rgba(12, 22, 34, .54);
  --player-expanded-fill: rgba(12, 22, 34, .58);
  --player-track: rgba(255, 255, 255, .22);
  --player-progress: rgba(255, 255, 255, .88);
  position: fixed;
  z-index: 8;
  inset-inline: 12px;
  bottom: calc(var(--luna-nav-height, 66px) + 28px + env(safe-area-inset-bottom));
  display: grid;
  grid-template-columns: minmax(0, 1fr) 44px;
  align-items: center;
  gap: 8px;
  width: auto;
  max-width: 528px;
  min-height: 72px;
  margin-inline: auto;
  padding: 10px 12px 15px;
  color: var(--player-ink);
  background: var(--player-fill);
  border: 1px solid var(--player-line);
  border-radius: 13px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .10), 0 7px 20px rgba(5, 10, 22, .12);
  backdrop-filter: blur(22px) saturate(100%);
  -webkit-backdrop-filter: blur(22px) saturate(100%);
}
#player .player-heading { display: none; }
#player .player-identity {
  display: flex;
  direction: ltr;
  align-items: center;
  gap: 10px;
  width: 100%;
  min-width: 0;
  min-height: 44px;
  padding: 0;
  color: inherit;
  background: none;
  border: 0;
  text-align: start;
}
#player .player-identity > span:nth-child(2) { flex: 1; min-width: 0; }
#player #player-cover { width: 54px; height: 37px; }
html[dir='rtl'] #player .player-identity > span:nth-child(2) { direction: rtl; text-align: right; }
html[dir='ltr'] #player .player-identity > span:nth-child(2) { direction: ltr; text-align: left; }
#player #playing-title {
  display: block;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.6;
}
#player #playing-subtitle { font-size: 12px; line-height: 1.5; color: var(--player-muted); }
#player .expand-mark { flex-shrink: 0; font-size: 16px; line-height: 1; color: var(--player-muted); }
#player .expand-mark svg { display: block; width: 18px; height: 18px; }
#player .transport { display: flex; align-items: center; justify-content: center; direction: ltr; padding: 0; }
#player .transport button {
  display: inline-grid;
  place-items: center;
  width: 44px;
  height: 44px;
  min-height: 44px;
  padding: 0;
  color: var(--player-ink);
  background: transparent;
  border: 0;
  border-radius: 50%;
  line-height: 1;
}
#player .transport svg { display: block; width: 22px; height: 22px; }
#player .transport .extra-control { display: none; }
#player #pause { border: 1px solid var(--player-line); }
#player .seek-wrap {
  display: block;
  position: absolute;
  inset-inline: 13px;
  bottom: 1px;
  height: 14px;
  min-width: 0;
}
#player #seek {
  display: block;
  appearance: none;
  -webkit-appearance: none;
  width: 100%;
  height: 14px;
  min-height: 14px;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  accent-color: var(--player-progress);
  direction: ltr;
  cursor: pointer;
}
#player #seek::-webkit-slider-runnable-track {
  height: 2px;
  border-radius: 2px;
  background: linear-gradient(to right, var(--player-progress) 0 var(--seek-progress, 0%), var(--player-track) var(--seek-progress, 0%) 100%);
}
#player #seek::-webkit-slider-thumb {
  appearance: none;
  -webkit-appearance: none;
  width: 8px;
  height: 8px;
  margin-top: -3px;
  border: 0;
  border-radius: 50%;
  background: var(--player-progress);
}
#player #seek::-moz-range-track { height: 2px; border-radius: 2px; background: var(--player-track); }
#player #seek::-moz-range-progress { height: 2px; border-radius: 2px; background: var(--player-progress); }
#player #seek::-moz-range-thumb { width: 8px; height: 8px; border: 0; border-radius: 50%; background: var(--player-progress); }
#player .time-row { display: none; }
#player #playing-description { margin: 0; color: var(--player-muted); font-size: 14px; line-height: 1.75; white-space: pre-line; }
#player:not(.expanded) #playing-description { display: none; }
#player #playback-state { grid-column: 1 / -1; margin: 0; color: var(--player-muted); font-size: 12px; line-height: 1.6; }
#player #playback-state:empty { display: none; }

#player.expanded {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 8px;
  min-height: 205px;
  max-height: min(420px, calc(100dvh - var(--luna-nav-height, 66px) - 100px - env(safe-area-inset-bottom)));
  overflow-y: auto;
  padding: 12px 16px 16px;
  border-radius: 20px;
  background: var(--player-expanded-fill);
}
#player.expanded .player-heading {
  display: flex;
  flex-direction: row-reverse;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  position: static;
  min-height: 36px;
  padding: 0;
  color: var(--player-muted);
  background: none;
  border: 0;
  font-size: 12px;
  line-height: 1.5;
}
#player.expanded #stop {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  min-height: 44px;
  padding: 0;
  color: var(--player-ink);
  background: transparent;
  border: 0;
}
#player.expanded #stop svg { width: 20px; height: 20px; }
#player.expanded .player-identity { min-height: 48px; padding: 0; }
#player.expanded #player-cover { width: 77px; height: 48px; }
#player.expanded #playing-title { font-size: 18px; font-weight: 500; }
#player.expanded .expand-mark { transform: rotate(180deg); }
#player.expanded .seek-wrap { position: static; height: auto; }
#player.expanded #seek { height: 30px; min-height: 30px; }
#player.expanded #seek::-webkit-slider-runnable-track { height: 3px; }
#player.expanded #seek::-webkit-slider-thumb { width: 12px; height: 12px; margin-top: -4.5px; }
#player.expanded #seek::-moz-range-track,
#player.expanded #seek::-moz-range-progress { height: 3px; }
#player.expanded #seek::-moz-range-thumb { width: 12px; height: 12px; }
#player.expanded .time-row { display: flex; justify-content: space-between; direction: ltr; color: var(--player-muted); font-size: 12px; line-height: 1.4; }
#player.expanded .transport {
  display: grid;
  grid-template-columns: 44px 44px 48px 44px 44px;
  gap: 8px;
  width: 100%;
  max-width: 300px;
  margin-inline: auto;
  padding-top: 2px;
}
#player.expanded .transport .extra-control { display: inline-grid; }
#player.expanded #pause { width: 48px; height: 48px; min-height: 48px; border: 1px solid var(--luna-mark-gold, #F2D170); }
#player.expanded #pause svg { width: 24px; height: 24px; }
#player.expanded #rewind svg,
#player.expanded #forward svg { width: 24px; height: 24px; }
#player.expanded #playing-description { max-height: 128px; overflow-y: auto; overflow-wrap: break-word; }

.light #products.track-list { color: #12233a; background: rgba(255, 255, 255, .42); border-color: rgba(18, 35, 58, .16); }
.light #products .track + .track { border-top-color: rgba(18, 35, 58, .12); }
.light #products .track[aria-current='true'] { color: #256E96; }
.light #player {
  --player-ink: #12233a;
  --player-muted: rgba(18, 35, 58, .76);
  --player-line: rgba(18, 35, 58, .20);
  --player-fill: rgba(255, 255, 255, .42);
  --player-expanded-fill: rgba(255, 255, 255, .42);
  --player-track: rgba(18, 35, 58, .20);
  --player-progress: #49627c;
}

@media (max-width: 350px) {
  #player { inset-inline: 10px; padding-inline: 10px; }
  #player.expanded { padding-inline: 12px; }
  #player.expanded #playing-title { font-size: 17px; }
  #products.track-list { padding-inline: 10px; }
  #products .track { gap: 10px; min-height: 62px; }
  #products .track .track-cover { width: 78px; height: 43px; }
  #products .track-copy { font-size: 16px; }
}
@media (prefers-reduced-motion: reduce) {
  #player, #player * { scroll-behavior: auto; transition: none; }
}

.light #player { backdrop-filter:blur(22px) saturate(100%); -webkit-backdrop-filter:blur(22px) saturate(100%); }
#player-cover-attribution { margin:0; font-size:10px; line-height:1.6; color:var(--player-muted); overflow-wrap:anywhere; }
#player:not(.expanded) #player-cover-attribution { display:none; }
#products .track-collection { margin:0; padding:14px 0 8px; color:var(--muted); font-size:14px; font-weight:400; line-height:1.7; }