/* DIUK Playlist — compact multi-track player using DIUK Framework variables. */
.diuk-playlist {
  display: grid;
  gap: var(--space-xs, .875rem);
  width: var(--width-full, 100%);
  min-width: 0;
}

.diuk-playlist__player {
  display: grid;
  gap: var(--space-2xs, .75rem);
  padding: var(--space-s, 1rem);
  background: var(--ui-surface, #fff);
  color: var(--ui-text, #2a1020);
  border: var(--border-width, 1px) solid var(--ui-border, #cfc5ca);
  border-radius: var(--border-radius-sm, .25rem);
}

.diuk-playlist__now {
  margin: 0;
  font-weight: var(--font-weight-semibold, 600);
  line-height: var(--leading-snug, 1.35);
}

.diuk-playlist__audio {
  display: block;
  width: 100%;
  max-width: 100%;
}

.diuk-playlist__tracks {
  display: grid;
  gap: 0;
  margin: 0;
  padding: 0;
  list-style: none;
  border-block-start: var(--border-width, 1px) solid var(--ui-border, #cfc5ca);
}

.diuk-playlist__track {
  margin: 0;
  border-block-end: var(--border-width, 1px) solid var(--ui-border, #cfc5ca);
}

.diuk-playlist__track-button {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--space-xs, .75rem);
  width: 100%;
  min-height: 2.75rem;
  padding: var(--space-xs, .75rem) 0;
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: background var(--transition-fast, 150ms ease), color var(--transition-fast, 150ms ease);
}

.diuk-playlist__track-button:hover {
  background: var(--white-t-1, rgba(255,255,255,.08));
}

.diuk-playlist__track-button:focus-visible {
  outline: var(--focus-width, 2px) solid var(--ui-focus-inner, #fff);
  outline-offset: var(--focus-offset, 2px);
  box-shadow: 0 0 0 calc(var(--focus-width, 2px) * 2) var(--ui-focus-outer, #c41831);
}

.diuk-playlist__track.is-current .diuk-playlist__track-button {
  font-weight: var(--font-weight-semibold, 600);
}

.diuk-playlist__track.is-current .diuk-playlist__track-title::before {
  content: "▶";
  display: inline-block;
  margin-inline-end: .5em;
  font-size: .8em;
  line-height: 1;
}

.diuk-playlist__track-action {
  text-decoration: underline;
  text-underline-offset: .15em;
}

.diuk-playlist .visually-hidden {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0 0 0 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

.diuk-playlist__empty {
  margin: 0;
  padding: var(--space-s, 1rem);
  border: var(--border-width, 1px) dashed var(--ui-border, #cfc5ca);
  border-radius: var(--border-radius-sm, .25rem);
}