/* Touché — Salon Soundtrack
   Warm, editorial, restrained. Matches the Touché brand. */

:root{
  --parchment:#f6f1e8;
  --card:#efe7d9;
  --ink:#2b2620;
  --ink-soft:#6f675c;
  --sage:#577f6c;
  --sage-deep:#3f6253;
  --line:#ddd2c0;
  --gold:#b08d4f;
}
*{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{height:100%}
body{
  font-family:'Jost',sans-serif;
  background:var(--parchment);
  color:var(--ink);
  display:flex;
  flex-direction:column;
  min-height:100dvh;
  letter-spacing:.01em;
}

/* ---------- header ---------- */
header{
  text-align:center;
  padding:clamp(20px,4vh,44px) 24px 8px;
  flex-shrink:0;
}
header .wordmark{
  font-family:'Cormorant Garamond',serif;
  font-size:clamp(30px,4.4vw,44px);
  font-weight:500;
  letter-spacing:.16em;
  text-transform:uppercase;
}
header .strap{
  font-size:12px;
  letter-spacing:.34em;
  text-transform:uppercase;
  color:var(--sage);
  margin-top:6px;
}

/* ---------- playlist chips ---------- */
nav.playlists{
  display:flex;
  gap:10px;
  justify-content:flex-start;
  overflow-x:auto;
  padding:18px clamp(16px,5vw,56px) 6px;
  scrollbar-width:none;
  /* scroll containers may be flex-shrunk to nothing — as the track
     list grew this row was being crushed and the chips clipped */
  flex-shrink:0;
}
nav.playlists::-webkit-scrollbar{display:none}
.chip{
  flex:0 0 auto;
  border:1px solid var(--line);
  background:transparent;
  color:var(--ink-soft);
  font-family:'Jost',sans-serif;
  font-size:15px;
  letter-spacing:.12em;
  text-transform:uppercase;
  padding:14px 22px;
  border-radius:999px;
  cursor:pointer;
  transition:all .25s ease;
  min-height:48px;
}
.chip.active{
  background:var(--sage);
  border-color:var(--sage);
  color:#fdfbf7;
}

/* ---------- now playing ---------- */
main{
  flex:1;
  display:flex;
  flex-direction:column;
  padding:0 clamp(16px,5vw,56px);
  max-width:980px;
  width:100%;
  margin:0 auto;
  /* allow the track list to scroll inside the page rather than
     stretching it taller than the screen */
  min-height:0;
}
.now{
  text-align:center;
  padding:clamp(16px,4vh,40px) 0 clamp(10px,2vh,20px);
}
.now .playlist-label{
  font-size:12px;
  letter-spacing:.3em;
  text-transform:uppercase;
  color:var(--gold);
}
.now h1{
  font-family:'Cormorant Garamond',serif;
  font-weight:500;
  font-size:clamp(34px,6.5vw,64px);
  line-height:1.08;
  margin:10px 0 6px;
}
.now .artist{
  color:var(--ink-soft);
  font-size:15px;
  letter-spacing:.06em;
}

/* equaliser — only animates while playing */
.eq{
  display:flex;
  gap:5px;
  justify-content:center;
  align-items:flex-end;
  height:30px;
  margin:18px auto 0;
}
.eq span{
  width:4px;
  height:6px;
  background:var(--sage);
  border-radius:2px;
  transition:height .3s;
}
.playing .eq span{animation:bounce 1.1s ease-in-out infinite}
.eq span:nth-child(2){animation-delay:.15s}
.eq span:nth-child(3){animation-delay:.3s}
.eq span:nth-child(4){animation-delay:.45s}
.eq span:nth-child(5){animation-delay:.6s}
@keyframes bounce{
  0%,100%{height:6px}
  50%{height:26px}
}
@media (prefers-reduced-motion: reduce){
  .playing .eq span{animation:none;height:14px}
}

/* ---------- track list ---------- */
.tracks{
  flex:1;
  overflow-y:auto;
  border-top:1px solid var(--line);
  margin-top:8px;
  padding-bottom:140px;
}
.track{
  display:flex;
  align-items:center;
  gap:18px;
  width:100%;
  text-align:left;
  background:none;
  border:none;
  border-bottom:1px solid var(--line);
  padding:18px 6px;
  cursor:pointer;
  font-family:'Jost',sans-serif;
  color:var(--ink);
  min-height:60px;
}
.track .idx{
  font-family:'Cormorant Garamond',serif;
  font-size:18px;
  color:var(--ink-soft);
  width:26px;
  text-align:center;
  flex-shrink:0;
}
.track .name{font-size:17px;flex:1}
.track .len{font-size:14px;color:var(--ink-soft)}
.track.current .idx{color:var(--sage)}
.track.current .name{color:var(--sage-deep);font-weight:500}

/* ---------- transport bar ---------- */
.bar{
  position:fixed;
  left:0;right:0;bottom:0;
  background:rgba(246,241,232,.92);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
  border-top:1px solid var(--line);
  padding:10px clamp(16px,5vw,56px) calc(14px + env(safe-area-inset-bottom));
}
.progress{
  display:flex;
  align-items:center;
  gap:12px;
  font-size:12px;
  color:var(--ink-soft);
  margin-bottom:8px;
}
.progress input[type=range]{
  flex:1;
  -webkit-appearance:none;
  appearance:none;
  height:3px;
  background:var(--line);
  border-radius:2px;
  cursor:pointer;
}
.progress input[type=range]::-webkit-slider-thumb{
  -webkit-appearance:none;
  width:16px;height:16px;
  border-radius:50%;
  background:var(--sage);
}

/* ---------- volume (desktop only — iPads use hardware/Sonos volume) ---------- */
.volume{
  display:flex;
  align-items:center;
  gap:8px;
  margin-left:14px;
}
.volume svg{
  width:18px;height:18px;
  fill:var(--ink-soft);
  flex-shrink:0;
}
.volume input[type=range]{
  flex:0 0 110px;
  -webkit-appearance:none;
  appearance:none;
  height:3px;
  background:var(--line);
  border-radius:2px;
  cursor:pointer;
}
.volume input[type=range]::-webkit-slider-thumb{
  -webkit-appearance:none;
  width:14px;height:14px;
  border-radius:50%;
  background:var(--sage);
}
@media (max-width:640px){
  .volume{display:none}
}
.controls{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:clamp(20px,6vw,48px);
}
.ctl{
  background:none;
  border:none;
  cursor:pointer;
  color:var(--ink);
  display:flex;
  align-items:center;
  justify-content:center;
  min-width:52px;
  min-height:52px;
  border-radius:50%;
  transition:color .2s, background .2s;
}
.ctl:focus-visible{outline:2px solid var(--sage);outline-offset:2px}
.ctl svg{width:26px;height:26px;fill:currentColor}
.ctl.play{
  background:var(--sage);
  color:#fdfbf7;
  width:76px;height:76px;
  box-shadow:0 6px 18px rgba(87,127,108,.35);
}
.ctl.play svg{width:32px;height:32px}
.ctl.toggle{color:var(--ink-soft)}
.ctl.toggle.on{color:var(--sage)}
.ctl.toggle .dot{
  position:absolute;
  margin-top:34px;
  width:4px;height:4px;
  border-radius:50%;
  background:var(--sage);
  opacity:0;
}
.ctl.toggle.on .dot{opacity:1}