@layer components {
  .radio__description {
    color: var(--color-ink-medium);
  }

  /* ---- Player card ---- */
  .radio__now-playing {
    text-align: center;
    margin-block-end: var(--block-space);
  }

  .radio__title {
    display: block;
    font-family: var(--font-display);
    font-size: var(--text-lg);
    font-weight: 700;
  }

  .radio__composer {
    display: block;
    font-size: var(--text-sm);
    color: var(--color-ink-medium);
    margin-block-start: 0.25rem;
  }

  /* ---- Transport controls ---- */
  .radio__controls {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    margin-block-end: var(--block-space);
  }

  .radio__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: none;
    border: none;
    color: var(--color-ink);
    cursor: pointer;
    padding: 0.5rem;
    border-radius: 50%;
    transition: background var(--duration-fast), color var(--duration-fast);
  }

  .radio__btn:hover {
    background: var(--color-panel);
  }

  .radio__btn--play {
    background: var(--color-accent);
    color: var(--color-white);
    padding: 0.75rem;
  }

  .radio__btn--play:hover {
    background: var(--color-link-hover);
  }

  /* Play/pause icon toggle */
  .radio__btn--play .radio__icon-pause { display: none; }
  .radio__btn--play[data-state="playing"] .radio__icon-play { display: none; }
  .radio__btn--play[data-state="playing"] .radio__icon-pause { display: block; }

  /* Shuffle indicator */
  .radio__btn--shuffle[data-state="on"] {
    color: var(--color-accent);
  }

  /* ---- Progress bar ---- */
  .radio__progress-wrap {
    display: flex;
    align-items: center;
    gap: 0.75rem;
  }

  .radio__time {
    font-size: var(--text-xs);
    font-family: var(--font-mono);
    color: var(--color-ink-light);
    min-inline-size: 3ch;
    text-align: center;
  }

  .radio__progress-bar {
    flex: 1;
    block-size: 6px;
    background: var(--color-panel-strong);
    border-radius: 3px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }

  .radio__progress {
    position: absolute;
    inset-block: 0;
    inset-inline-start: 0;
    width: 0%;
    background: var(--color-accent);
    border-radius: 3px;
    transition: width 0.25s linear;
  }

  /* ---- Track list ---- */
  .radio__tracklist {
    list-style: none;
    padding: 0;
    border: var(--border);
    border-radius: var(--radius-lg);
    overflow: hidden;
  }

  .radio__track {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 0.75rem 1rem;
    cursor: pointer;
    transition: background var(--duration-fast);
  }

  .radio__track:not(:last-child) {
    border-block-end: var(--border);
  }

  .radio__track:hover {
    background: var(--color-surface);
  }

  .radio__track--active {
    background: var(--color-accent-soft);
  }

  .radio__track--active:hover {
    background: var(--color-accent-soft);
  }

  .radio__track-number {
    font-size: var(--text-sm);
    color: var(--color-ink-light);
    min-inline-size: 2ch;
    text-align: end;
  }

  .radio__track-title {
    flex: 1;
    font-weight: 600;
  }

  .radio__track-composer {
    font-size: var(--text-sm);
    color: var(--color-ink-medium);
  }

  /* ---- Responsive ---- */
  @media (max-width: 42rem) {
    .radio__player {
      --surface-card-padding: var(--block-space);
    }

    .radio__track {
      padding: 0.625rem 0.75rem;
    }

    .radio__track-composer {
      display: none;
    }
  }
}