/* =====================================================================
   Likkle Coders — SONGS (v559)
   Big round play buttons, large titles, and a progress bar wide enough
   to read across a classroom. Sized for a thumb, not a mouse pointer.
   ===================================================================== */

.sng-hero {
  display: flex; gap: 16px; align-items: center;
  padding: 20px 22px; margin-bottom: 18px;
  border-radius: var(--lct-r-lg);
  background: linear-gradient(135deg, #7C3AED, #4C1D95);
  color: #fff;
}
.sng-hero-ico { font-size: 2.4rem; line-height: 1; }
.sng-kick {
  display: inline-block; font-size: var(--lct-t-2xs); font-weight: 800;
  letter-spacing: .1em; opacity: .9;
}
.sng-hero h2 { margin: .15rem 0 .2rem; font-size: var(--lct-t-2xl); color: #fff; }
/* Global paragraph colour wins over a plain `.sng-hero p`, which left this
   line slate-grey on deep purple — unreadable. Name the colour explicitly. */
.sng-hero div > p { margin: 0; font-size: var(--lct-t-sm); color: #fff; opacity: .95; }

.sng-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }

.sng-row {
  display: grid; align-items: center; gap: 4px 14px;
  grid-template-columns: auto auto 1fr auto;
  grid-template-areas:
    "play num title time"
    "play bar bar   bar";
  padding: 14px 16px;
  background: var(--lct-paper); border: 2px solid var(--lct-line);
  border-radius: var(--lct-r-lg);
  transition: border-color var(--lct-quick), background var(--lct-quick);
}
.sng-row.is-playing { border-color: #7C3AED; background: color-mix(in srgb, #7C3AED 8%, transparent); }

.sng-play {
  grid-area: play;
  width: 56px; height: 56px; flex: 0 0 auto; cursor: pointer;
  display: grid; place-items: center;
  background: #7C3AED; color: #fff; border: none; border-radius: 50%;
  font-size: 1.25rem; font-family: inherit; line-height: 1;
  transition: transform var(--lct-quick), filter var(--lct-quick);
}
.sng-play:hover { filter: brightness(1.1); transform: scale(1.05); }
.sng-play:active { transform: scale(.96); }
.sng-play-ico { pointer-events: none; }

.sng-num {
  grid-area: num; min-width: 26px;
  font-family: var(--lct-f-mono); font-weight: 800; font-size: var(--lct-t-sm);
  color: var(--lct-ink-3); font-variant-numeric: tabular-nums;
}
.sng-title { grid-area: title; font-size: var(--lct-t-lg); font-weight: 700; color: var(--lct-ink); }
.sng-time {
  grid-area: time; font-family: var(--lct-f-mono); font-size: var(--lct-t-sm);
  color: var(--lct-ink-3); font-variant-numeric: tabular-nums;
}

.sng-bar {
  grid-area: bar; height: 8px; margin-top: 4px;
  background: var(--lct-line); border-radius: var(--lct-r-pill); overflow: hidden;
}
.sng-bar-fill {
  display: block; height: 100%; width: 0%;
  background: #7C3AED; border-radius: var(--lct-r-pill);
  transition: width .25s linear;
}

.sng-note {
  margin: 14px 0 0; padding: 11px 15px;
  background: var(--lct-danger-soft, var(--lct-page-2));
  border: 1px solid var(--lct-danger, var(--lct-line));
  border-radius: var(--lct-r-sm);
  font-size: var(--lct-t-sm); color: var(--lct-ink-2);
}

@media (max-width: 480px) {
  .sng-hero { padding: 16px; gap: 12px; }
  .sng-row { padding: 12px; gap: 4px 11px; }
  .sng-play { width: 50px; height: 50px; }
  .sng-title { font-size: var(--lct-t-base); }
}