/* Cover popover (see cover-links.js). Small play badge on covers; menu with Spotify / YouTube / Last.fm / Bandcamp. */
.cl-cover { position: relative; cursor: pointer; -webkit-tap-highlight-color: transparent; }
a.artist, a.album, a.friend-now { -webkit-tap-highlight-color: transparent; }   /* no blue flash over the card when tapping its cover */
.cl-cover:focus-visible { outline: 2px solid var(--amber, #e3a94f); outline-offset: 2px; }
/* Small tool buttons on covers: eye (menu) on all, play/pause (30s preview) on track covers. */
.cl-tools { position: absolute; right: 6px; bottom: 6px; z-index: 3; display: flex; flex-direction: column; gap: 5px; align-items: center;
  opacity: .72; transition: opacity .2s ease; }
.cl-tools button { appearance: none; margin: 0; padding: 0; width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; cursor: pointer;
  color: #f3eee6; background: rgba(13,12,11,.55); border: 1px solid rgba(255,255,255,.16); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  transition: background .15s ease, transform .15s ease, color .15s ease; -webkit-tap-highlight-color: transparent; }
.cl-tools button svg { width: 15px; height: 15px; }
.cl-tools button.play { opacity: 1; margin: 0; vertical-align: baseline; }
.cl-tools button.play svg { width: 13px; height: 13px; }
.cl-tools button:hover, .cl-tools button:focus-visible, .cl-tools .cl-eye[aria-expanded="true"] { background: rgba(13,12,11,.82); transform: scale(1.06); }
.cl-tools button:focus-visible { outline: 2px solid var(--amber, #e3a94f); outline-offset: 1px; }
.cl-tools button.play[data-state="playing"], .cl-tools button.play[data-state="loading"] { color: var(--amber, #e3a94f); border-color: rgba(227,169,79,.5); }
.cl-tools button.play.none { opacity: .35; cursor: default; }
/* small rows: tighter stack */
#recent .cl-tools { right: 2px; bottom: 2px; gap: 2px; }
#recent .cl-tools button { width: 18px; height: 18px; } #recent .cl-tools button svg { width: 11px; height: 11px; }
/* hero: bottom-right is the big preview ring, so the eye sits top-right */
#hero .cl-tools { top: 10px; right: 10px; bottom: auto; } #hero .cl-tools button { width: 30px; height: 30px; } #hero .cl-tools button svg { width: 17px; height: 17px; }
@media (hover: hover) {
  .cl-tools { opacity: 0; }
  .cl-cover:hover .cl-tools, .cl-tools:focus-within, .cl-tools:has([aria-expanded="true"]), .cl-tools:has(.play[data-state="playing"]), .cl-tools:has(.play[data-state="loading"]) { opacity: 1; }
}

.cl-pop {
  position: absolute; z-index: 1000; min-width: 210px; max-width: min(290px, calc(100vw - 16px)); padding: 6px;
  background: rgba(24,22,20,.97); border: 1px solid rgba(255,255,255,.1); border-radius: 12px;
  box-shadow: 0 18px 40px -12px rgba(0,0,0,.7); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  font: 13px/1.3 Inter, system-ui, sans-serif; color: #f3eee6; animation: cl-in .14s ease-out;
}
@keyframes cl-in { from { opacity: 0; transform: translateY(-3px); } }
.cl-head { padding: 6px 9px 7px; border-bottom: 1px solid rgba(255,255,255,.07); margin-bottom: 4px; }
.cl-k { display: block; font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: var(--amber, #e3a94f); }
.cl-what { display: block; margin-top: 2px; color: rgba(243,238,230,.65); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cl-item { display: flex; align-items: center; gap: 10px; padding: 8px 9px; border-radius: 8px; color: inherit; text-decoration: none; outline: none; }
.cl-item svg { width: 16px; height: 16px; flex: none; opacity: .85; }
.cl-item:hover, .cl-item:focus-visible { background: rgba(255,255,255,.07); }
.cl-spotify svg { color: #1ed760; } .cl-youtube svg { color: #ff4e45; } .cl-lastfm svg { color: #e4405a; } .cl-bandcamp svg { color: #4fb3c8; }
.cl-spin { margin-left: auto; width: 12px; height: 12px; border-radius: 50%; border: 2px solid rgba(255,255,255,.18); border-top-color: #1ed760; animation: cl-rot .7s linear infinite; }
@keyframes cl-rot { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .cl-pop { animation: none; } .cl-spin { animation-duration: 2s; } .cl-tools, .cl-tools button { transition: none; } }

/* Hero label ("Ouvindo agora" / "Última faixa" + bars): white with a dark shadow so it reads on light covers too. */
#hero .hero-label { color: #fff; text-shadow: 0 1px 2px rgba(0,0,0,.85), 0 0 8px rgba(0,0,0,.55); }
#hero .hero-label .ago { color: rgba(255,255,255,.82); text-shadow: 0 1px 2px rgba(0,0,0,.85), 0 0 8px rgba(0,0,0,.55); }
#hero .hero-label .eq i { background: #fff; box-shadow: 0 0 2px rgba(0,0,0,.9), 0 0 6px rgba(0,0,0,.5); }