/* JF4174 — lighter recommendation marks, readable long titles, music-only accounts */
.album-recommendation-grade{
  top:11px;
  left:49px;
  width:auto;
  height:24px;
  padding:0;
  gap:0;
  border:0;
  border-radius:0;
  background:transparent;
  box-shadow:none;
}
.album-recommendation-bars{height:24px;gap:3px;align-items:center}
.album-recommendation-bars i{
  width:4.2px;
  height:24px;
  border-radius:2px;
  background:#9dff2d;
  box-shadow:0 0 5px rgba(157,255,45,.88);
}

.track-title-ticker{
  position:relative;
  min-width:0;
  max-width:100%;
  overflow:hidden;
  white-space:nowrap;
  line-height:1.42;
  cursor:help;
  touch-action:manipulation;
}
.track-title-ticker>[data-track-title-text]{
  display:inline-block;
  max-width:none;
  overflow:visible;
  white-space:nowrap;
  text-overflow:clip;
  transform:translateX(0);
}
.track-title-ticker.is-overflowing.is-visible:not(.is-expanded)>[data-track-title-text]{
  animation:jf4174-track-title-scroll var(--track-title-duration,18s) ease-in-out infinite alternate;
  will-change:transform;
}
@keyframes jf4174-track-title-scroll{
  0%,14%{transform:translateX(0)}
  86%,100%{transform:translateX(calc(-1 * var(--track-title-distance,0px)))}
}
.track-title-ticker:focus-visible{outline:2px solid rgba(182,102,72,.55);outline-offset:2px;border-radius:4px}
.track-title-ticker.is-expanded{overflow:visible;z-index:40}
.track-title-ticker.is-expanded>[data-track-title-text]{
  position:absolute;
  z-index:41;
  left:0;
  top:-7px;
  width:min(620px,calc(100vw - 82px));
  box-sizing:border-box;
  padding:8px 10px;
  border:1px solid rgba(182,102,72,.35);
  border-radius:8px;
  background:#fffaf4;
  box-shadow:0 8px 24px rgba(48,37,27,.2);
  color:#352b25;
  white-space:normal;
  overflow-wrap:anywhere;
  animation:none!important;
  transform:none!important;
  will-change:auto;
}
.music-track-row.is-recommended-track .track-title-ticker>[data-track-title-text]{color:#e67932;text-shadow:0 0 1px rgba(230,121,50,.16)}

.music-only-badge{
  display:inline-flex;
  align-items:center;
  padding:4px 8px;
  border-radius:999px;
  background:#e8f8cf;
  color:#496d12;
  font-size:.72rem;
  font-weight:850;
}
.member-permission-card.is-music-only-account{border-color:#bedb8a;background:#fbfff4}
.music-only-permission-summary{display:grid;grid-template-columns:max-content minmax(0,1fr);gap:8px 12px;padding:13px;border-radius:12px;background:#f0f8e4;color:#4a513f;font-size:.84rem}
.music-only-permission-summary b{color:#4d7118}
.profile-page.is-music-only .profile-layout{grid-template-columns:minmax(0,680px);justify-content:center}
.music-only-profile{border-color:#c9dfa4;background:#fbfff5}

@media(max-width:700px){
  .album-recommendation-grade{left:49px}
  .album-recommendation-bars i{width:4.2px;height:24px}
  .track-title-ticker.is-expanded>[data-track-title-text]{width:calc(100vw - 78px);font-size:.88rem}
  .music-only-permission-summary{grid-template-columns:1fr;gap:4px}
}
@media(prefers-reduced-motion:reduce){
  .track-title-ticker.is-overflowing>[data-track-title-text]{animation:none!important;will-change:auto}
}

/* JF4175: distinguish the album introduction panel from the dark floating player. */
.music-album-detail{
  background:linear-gradient(135deg,#755747 0%,#8b6856 100%)!important;
  box-shadow:0 12px 30px rgba(73,48,35,.20);
}
.music-album-detail .music-back{color:#fff5ed}
.music-album-detail .music-album-hero p{color:#f3e9e1}
.music-album-detail .album-credit-chips span{
  border-color:rgba(255,255,255,.28);
  color:#fff7f1;
}
.music-album-detail .album-information-body{
  color:#3b3733;
}
.music-album-detail .album-information-body p,
.music-album-detail .album-information-body small{
  color:#3b3733;
}

/* JF4176: keep recommendation bars inside the cover's upper-right corner. */
.music-album-cover{position:relative}
.music-album-cover .album-recommendation-grade{
  top:4px;
  right:4px;
  left:auto;
  width:auto;
  height:16.8px;
  padding:0;
}
.music-album-cover .album-recommendation-bars{
  height:16.8px;
  gap:3px;
  align-items:center;
}
.music-album-cover .album-recommendation-bars i{
  width:4.2px;
  height:16.8px;
  border-radius:2px;
  background:#ff2bd6;
  box-shadow:none;
  filter:none;
}
@media(max-width:760px){
  .music-album-grid.grid-cols-3 .music-album-cover .album-recommendation-grade{top:7px;right:5px;left:auto}
  .music-album-cover .album-recommendation-bars i{width:4.2px;height:16.8px}
}
