/* Mixer panels: track-coloured panel headers, the new-releases clip feed and the projects rack. */
/* Mixer panels: a panel under a track-coloured header strip, like a channel in an arrange view; the clip feed of new
   releases (js/release-feed.js) and the projects rack.
   Used by the home page and the dashboard. */

.platform .mix-panel {
  padding: 0 0 18px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--panel);
  box-shadow: var(--shadow), 0 6px 0 -2px var(--stack);
  overflow: hidden;
}
.mix-panel > :not(.mix-head) { margin-inline: 18px; }
/* track header: a coloured strip with the panel's name, like a channel in an arrange view */
.mix-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
  padding: 10px 18px;
  background: linear-gradient(90deg, color-mix(in srgb, var(--track) 22%, var(--panel)) 0 6px, var(--panel-2) 6px);
  border-bottom: 1px solid var(--line);
}
.mix-head :is(h2, h3) { margin: 0; font-size: 1rem; letter-spacing: 0; display: flex; align-items: center; gap: 8px; }
.mix-head :is(h2, h3)::before { content: ""; width: 8px; height: 8px; border-radius: 2px; background: var(--track); }
.mix-head a { font-size: .9rem; font-weight: 600; padding-block: 6px; display: inline-block; }

.mix-panel .actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 12px; }

/* the releases feed: each row is a clip on its project's track */
.clip-feed { list-style: none; padding: 0; display: grid; gap: 8px; margin-top: 0; }
.clip {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 2px 12px;
  padding: 10px 14px 10px 18px;
  border-radius: 8px;
  background: color-mix(in srgb, var(--track) 10%, var(--panel));
  border: 1px solid color-mix(in srgb, var(--track) 35%, var(--line));
  color: var(--text);
  position: relative;
  transition: transform .15s var(--snap), border-color .15s;
}
.clip::before { content: ""; position: absolute; inset: 6px auto 6px 6px; width: 4px; border-radius: 2px; background: var(--track); }
.clip:hover { color: var(--text); border-color: var(--track); transform: translateX(3px); }
.clip-title { font-weight: 650; }
.clip-meta { grid-column: 1; color: var(--muted); font-size: .88rem; }
.clip-end { grid-row: 1 / span 2; grid-column: 2; align-self: center; font-family: var(--mono); font-size: .85rem; color: var(--muted); }

/* projects rack: cards as channel strips */
.rack { grid-template-columns: 1fr; margin: 0; }
.rack .project-card { box-shadow: none; border-left: 4px solid var(--coral); }


@media (max-width: 600px) {
  .mix-panel > :not(.mix-head) { margin-inline: 14px; }
  .mix-head { padding: 10px 14px; }
  .clip { grid-template-columns: 1fr; }
  .clip-end { grid-row: auto; grid-column: 1; }
}
.mix-panel .small-print a { display: inline-block; padding-block: 4px; }