/* Music and sound: a row in a track list, with the player up front. */

[data-theme="music"] {
  --accent: #b3a1e0;
}

.post.mu {
  display: block;
  margin: 0.7rem 0;
  padding: 0.85rem 1.1rem 1rem;
  border: 1px solid color-mix(in oklab, var(--accent) 24%, var(--line));
  border-radius: 10px;
  background: color-mix(in oklab, var(--accent) 7%, var(--surface));
}

.mu-head {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  margin-bottom: 0.65rem;
}

.mu-bars {
  display: inline-flex;
  flex: none;
  align-items: flex-end;
  gap: 2px;
  height: 1.05rem;
}
.mu-bars i { display: block; width: 3px; border-radius: 1px; background: var(--accent); }
.mu-bars i:nth-child(1) { height: 45%; }
.mu-bars i:nth-child(2) { height: 100%; }
.mu-bars i:nth-child(3) { height: 65%; }
.mu-bars i:nth-child(4) { height: 85%; }
.mu-bars i:nth-child(5) { height: 35%; }

.mu-title { margin: 0; font: 650 1.125rem/1.3 var(--sans); }
.mu-title a { color: var(--text); text-decoration: none; }
.mu-title a:hover { color: var(--accent); }

.mu-date {
  flex: none;
  margin-left: auto;
  color: var(--muted);
  font-family: var(--mono);
  font-size: 0.75rem;
  text-decoration: none;
}
.mu-date:hover { color: var(--text); }

.mu audio,
.mu .prose audio {
  display: block;
  width: 100%;
  margin: 0.55rem 0;
}

.mu .prose code,
.mu .prose pre { background: var(--bg); }