/*
  RadioDJ Plugin — Currently Playing (mobile-first compact layout)
  Layout reference: cover art on the left, key fields stacked on the right.
  Requirements:
  - No outer margins (preserve pixel space)
  - Compact when short, expands naturally when long
  - Collapses for small screens (labels stack above values)
*/

.rdjcp-wrap{--rdj-cover-size:48px;
  /*
    Shrink-to-fit the data (instead of always full width)
    and center it horizontally.
    Keep max-width:100% so it never overflows the viewport.
  */
  margin:0 auto;
  padding:0;
  width:-moz-fit-content;
  width:fit-content;
  max-width:100%;
}

.rdjcp-title{
  margin:0;
  padding:0;
  font-size:16px;
  line-height:1.2;
}

/* Screen-reader-only helper */
.rdjcp-wrap .screen-reader-text{
  position:absolute !important;
  width:1px;
  height:1px;
  padding:0;
  margin:-1px;
  overflow:hidden;
  clip:rect(0,0,0,0);
  white-space:nowrap;
  border:0;
}

/* Main card */
.rdjcp-compact .rdjcp-row{
  display:grid;
  grid-template-columns:calc(var(--rdj-cover-size) + 8px) 1fr;
  gap:0;
  align-items:start;
  width:100%;
}

/* Cover */
.rdjcp-compact .rdjcp-cover{
  padding:0;
  margin:0;
}
.rdjcp-compact .rdjcp-coverimg{
  width:var(--rdj-cover-size);
  height:var(--rdj-cover-size);
  display:block;
  object-fit:cover;
  aspect-ratio:1/1;
  border-radius:10px;
  background:rgba(0,0,0,0.04);
}

/* Fields */
.rdjcp-compact .rdjcp-fields{
  display:flex;
  flex-direction:column;
  gap:0;
  padding:0;
  margin:0;
  min-width:0;
}

.rdjcp-compact .rdjcp-field{
  display:flex;
  align-items:flex-start;
  gap:10px;
  padding:2px 0;
  margin:0;
  min-width:0;
  line-height:1.15;
}

.rdjcp-compact .rdjcp-label{ flex:0 0 32px; font-size:11px; }

.rdjcp-compact .rdjcp-value{
  flex:1 1 auto;
  min-width:0;
  font-size:13px;
  overflow-wrap:anywhere;
  word-break:break-word;
}

/* Keep rating compact and wrap-safe */
.rdjcp-compact .rdjtracks-rating{
  display:flex;
  align-items:center;
  gap:8px;
  flex-wrap:wrap;
}

/* Rating stars (shared with tracks) */
.rdjtracks-stars{display:inline-flex;gap:2px;line-height:1;}
.rdjtracks-star{border:0;background:transparent;padding:0 1px;cursor:pointer;font-size:16px;line-height:1;opacity:.35;color:#f59e0b !important;}
.rdjtracks-star.is-on{opacity:1;}
.rdjtracks-star.is-half{opacity:.35;position:relative;}
.rdjtracks-star.is-half::after{content:'★';position:absolute;left:0;top:0;width:50%;overflow:hidden;opacity:1;display:block;color:#f59e0b !important;}
.rdjtracks-star.is-hover{opacity:1;transform:translateY(-1px);}
.rdjtracks-rating-meta{font-size:12px;opacity:.8;}
.rdjtracks-rating.is-busy{opacity:.6;pointer-events:none;}

/* Small screens: collapse label/value to reduce horizontal pressure */
@media (max-width: 320px){
  .rdjcp-compact .rdjcp-row{ grid-template-columns:64px 1fr; }
  .rdjcp-compact .rdjcp-coverimg{ width:var(--rdj-cover-size); height:var(--rdj-cover-size); border-radius:9px; }
  .rdjcp-compact .rdjcp-field{ gap:8px; padding:1px 0; }
  .rdjcp-compact .rdjcp-label{ flex:0 0 auto; width:auto; font-size:11px; }
  .rdjcp-compact .rdjcp-value{ font-size:13px; }
}

/* Very small screens: stack label above value for maximum space 
@media (max-width: 319px){
  .rdjcp-compact .rdjcp-field{ flex-direction:column; gap:2px; }
  .rdjcp-compact .rdjcp-label{ font-size:11px; }
} */