/* ──────────────────────────────────────────────────────────────
   Shared song-player UI: track list + sticky player + mini mode.
   Used by other-projects.html; songs.html still carries its own
   copy inline. Depends on the tokens in styles.css.
   ────────────────────────────────────────────────────────────── */

.tracklist { border-top: 1px solid var(--border); max-width: 880px; }
.track {
  display: grid; grid-template-columns: 34px 1fr auto;
  align-items: center; gap: 18px;
  padding: 20px 4px; border-bottom: 1px solid var(--border);
  transition: background .2s;
}
.track:hover { background: rgba(176,92,56,.045); }
.track.playing { background: rgba(176,92,56,.075); }

.track-num { font-family: var(--serif); font-size: 1.05rem; color: var(--text-light); text-align: center; }
.track.playing .track-num { color: var(--accent); }
.track-lead { display: flex; align-items: center; gap: 18px; min-width: 0; }

.track-cover {
  position: relative; flex: none;
  width: 104px; aspect-ratio: 4 / 3;
  padding: 0; border: 1px solid var(--border); border-radius: var(--radius);
  overflow: hidden; cursor: pointer; background: var(--surface);
  transition: transform .18s cubic-bezier(.22,.8,.3,1), box-shadow .18s, border-color .18s;
}
.track-cover img {
  width: 100%; height: 100%; object-fit: cover;
  object-position: 50% 0%;              /* anchor to the top — titles live there */
  transition: transform .3s cubic-bezier(.22,.8,.3,1), filter .2s;
}
.track-cover:hover { transform: translateY(-2px); box-shadow: 0 6px 18px rgba(26,20,10,.16); }
.track-cover:hover img { transform: scale(1.05); }
.track-cover:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.cov-ic {
  position: absolute; left: 50%; top: 50%;
  transform: translate(-50%, -50%) scale(.9);
  width: 36px; height: 36px; display: grid; place-items: center;
  border-radius: 50%; background: rgba(26,20,10,.6); color: #fff;
  backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px);
  opacity: 0; pointer-events: none;
  transition: opacity .2s, transform .2s, background .2s;
}
.cov-ic svg { width: 14px; height: 14px; display: block; }
.track-cover:hover .cov-ic,
.track-cover:focus-visible .cov-ic { opacity: 1; transform: translate(-50%, -50%) scale(1); }
.track.playing .cov-ic { opacity: 1; transform: translate(-50%,-50%) scale(1); background: var(--accent); }
.track.playing .track-cover { border-color: var(--accent); }
.track.playing .track-cover img { filter: saturate(1.06); }

.track-body { min-width: 0; }
.track-title {
  font-family: var(--serif); font-size: 1.22rem; font-weight: 600;
  color: var(--dark); line-height: 1.25; margin-bottom: 4px;
}
.track-meta { font-size: .72rem; letter-spacing: .1em; text-transform: uppercase; color: var(--text-light); }

.track-actions { display: flex; align-items: center; gap: 8px; }
.track-dl, .track-share {
  display: inline-flex; align-items: center; gap: 7px;
  font-family: var(--sans);
  font-size: .68rem; font-weight: 500; letter-spacing: .12em; text-transform: uppercase;
  color: var(--text-light); background: transparent; cursor: pointer;
  padding: 9px 14px; border: 1px solid var(--border); border-radius: var(--radius);
  white-space: nowrap; transition: color .2s, border-color .2s;
}
.track-dl:hover, .track-share:hover { color: var(--accent); border-color: var(--accent); }
.track-dl svg, .track-share svg { width: 13px; height: 13px; flex: none; }

.track.linked { animation: linkflash 1.8s ease-out 1; }
@keyframes linkflash {
  0%, 50% { background: rgba(176,92,56,.16); }
  100%    { background: transparent; }
}

/* ── Sticky player ───────────────────────────────────────────── */
.player {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 90;
  background: rgba(250,247,242,.96);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  border-top: 1px solid var(--border);
  padding: 14px 28px 16px;
  transform: translateY(110%);
  transition: transform .32s cubic-bezier(.22,.8,.3,1);
}
.player.up { transform: translateY(0); }
.player-inner { max-width: 1320px; margin: 0 auto; display: flex; align-items: center; gap: 18px; }

.player-art {
  width: 62px; height: 47px; flex: none;
  object-fit: cover; object-position: 50% 0%;
  border-radius: 4px; border: 1px solid var(--border); background: var(--surface);
  display: none;
}
.player-art.on { display: block; }

.player-btn {
  width: 46px; height: 46px; flex: none;
  display: grid; place-items: center; border: none; border-radius: 50%;
  background: var(--dark); color: var(--bg); cursor: pointer; transition: background .2s;
}
.player-btn:hover { background: var(--accent); }
.player-btn svg { width: 16px; height: 16px; display: block; }

.player-ctrl {
  position: relative; flex: none; width: 38px; height: 38px;
  display: grid; place-items: center; border: none; border-radius: 50%;
  background: transparent; color: var(--text-light);
  cursor: pointer; transition: color .2s, background .2s;
}
.player-ctrl:hover { color: var(--accent); background: rgba(176,92,56,.09); }
.player-ctrl:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.player-ctrl svg { width: 17px; height: 17px; display: block; }
.player-ctrl.on { color: var(--accent); }
.player-ctrl.on::after {
  content: ''; position: absolute; bottom: 4px; left: 50%;
  width: 4px; height: 4px; margin-left: -2px; border-radius: 50%; background: var(--accent);
}

.player-mid { flex: 1; min-width: 0; }
.player-title {
  font-family: var(--serif); font-size: 1rem; font-weight: 600;
  color: var(--dark); margin-bottom: 7px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.player-scrub { display: flex; align-items: center; gap: 12px; }
.player-time { font-size: .7rem; font-variant-numeric: tabular-nums; color: var(--text-light); flex: none; min-width: 36px; }
.player-seek {
  -webkit-appearance: none; appearance: none;
  flex: 1; height: 3px; border-radius: 2px;
  background: var(--border); cursor: pointer; outline: none;
}
.player-seek::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 13px; height: 13px; border-radius: 50%; background: var(--accent); border: none; cursor: pointer;
}
.player-seek::-moz-range-thumb {
  width: 13px; height: 13px; border-radius: 50%; background: var(--accent); border: none; cursor: pointer;
}
.player-dl {
  flex: none; display: grid; place-items: center; width: 40px; height: 40px;
  border: 1px solid var(--border); border-radius: var(--radius);
  color: var(--text-light); transition: color .2s, border-color .2s;
}
.player-dl:hover { color: var(--accent); border-color: var(--accent); }
.player-dl svg { width: 15px; height: 15px; }

/* ── Mini (shrunk) player ────────────────────────────────────── */
.player-size svg { transition: transform .22s cubic-bezier(.22,.8,.3,1); }
.player.mini {
  left: auto; right: 16px; bottom: 16px;
  width: min(474px, calc(100vw - 32px));
  padding: 7px 9px;
  border: 1px solid var(--border); border-radius: 999px;
  box-shadow: 0 10px 30px rgba(26,20,10,.20);
}
.player.mini .player-inner { gap: 2px; max-width: none; flex-wrap: nowrap; }
.player.mini .player-title,
.player.mini .player-dl { display: none; }
.player.mini .player-mid { flex: 1 1 auto; min-width: 0; }
.player.mini .player-scrub { gap: 8px; min-width: 0; }
.player.mini .player-seek { min-width: 0; }
.player.mini .player-time { font-size: .66rem; min-width: 30px; flex: none; }
.player.mini .player-art,
.player.mini .player-btn,
.player.mini .player-ctrl { flex: none; }
.player.mini .player-art { width: 38px; height: 29px; margin-right: 6px; }
.player.mini .player-btn { width: 38px; height: 38px; }
.player.mini .player-btn svg { width: 14px; height: 14px; }
.player.mini .player-ctrl { width: 32px; height: 32px; }
.player.mini .player-ctrl svg { width: 15px; height: 15px; }

/* ── Toast ───────────────────────────────────────────────────── */
.toast {
  position: fixed; left: 50%; bottom: 108px;
  transform: translate(-50%, 10px);
  background: var(--dark); color: var(--bg);
  font-size: .76rem; letter-spacing: .05em;
  padding: 11px 20px; border-radius: var(--radius);
  box-shadow: 0 6px 24px rgba(26,20,10,.22);
  opacity: 0; pointer-events: none; z-index: 120;
  max-width: calc(100vw - 40px);
  transition: opacity .22s ease, transform .22s ease;
}
.toast.show { opacity: 1; transform: translate(-50%, 0); }

@media (max-width: 720px) {
  .track { grid-template-columns: 24px 1fr; gap: 12px; padding: 18px 2px; }
  .track-lead { gap: 13px; }
  .track-cover { width: 76px; }
  .cov-ic { width: 30px; height: 30px; }
  .track-actions { grid-column: 2 / -1; justify-self: start; margin-top: 8px; }
  .track-title { font-size: 1.08rem; }
  .player { padding: 12px 18px 14px; }
  .player-art { width: 46px; height: 35px; }
  .player-inner { flex-wrap: wrap; gap: 12px; }
  .player-mid { flex: 1 1 100%; order: 3; }
  .player-ctrl { width: 34px; height: 34px; }
  .player-ctrl svg { width: 16px; height: 16px; }
  .player-btn { width: 40px; height: 40px; }
  .player-title { margin-bottom: 5px; }
  .player-dl { display: none; }
  .player.mini { right: 10px; bottom: 10px; width: calc(100vw - 20px); padding: 6px 8px; }
  .player.mini .player-mid { flex: 1 1 auto; order: 0; }
  .player.mini #pDur,
  .player.mini #pShuffle { display: none; }
}

/* ── Page-level share buttons ────────────────────────────────── */
.btn-share {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--sans);
  font-size: .72rem; font-weight: 500; letter-spacing: .12em; text-transform: uppercase;
  padding: 11px 20px;
  border: 1px solid var(--border); border-radius: var(--radius);
  color: var(--text-light); background: transparent; cursor: pointer;
  white-space: nowrap; line-height: 1;
  transition: color .2s, border-color .2s;
}
.btn-share:hover { color: var(--accent); border-color: var(--accent); }
.btn-share[hidden] { display: none; }
.btn-share svg { width: 14px; height: 14px; flex: none; }
.songs-actions { display: flex; flex-wrap: wrap; gap: 10px; margin: 22px 0 0; }