/* Absolute labels preserve the existing name, action and pagination geometry. */
.name-tone-label[data-name-tone-label] {
  position: absolute !important;
  display: block !important;
  visibility: hidden;
  z-index: 1;
  margin: 0 !important;
  padding: 0 !important;
  width: max-content !important;
  max-width: none !important;
  min-width: 0 !important;
  min-height: 0 !important;
  height: auto !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  text-shadow: none !important;
  color: var(--muted, #6b7470) !important;
  font: 400 var(--tone-label-font-size, 12px)/var(--tone-label-line-height, 16px) system-ui, -apple-system, "PingFang SC", "Microsoft YaHei", sans-serif !important;
  letter-spacing: 2px !important;
  white-space: nowrap;
  pointer-events: none;
  transform: translate(-50%, -100%);
}
.m-result-cell .name-tone-label[data-name-tone-label] {
  --tone-label-font-size: 11px;
  --tone-label-line-height: 15px;
}
/* Only tightly packed style results may use the approved, bounded vertical adjustment. */
.style-name-tile[data-tone-name-shift] > span:not(.name-tone-label),
.style-name-tile[data-tone-name-shift] > span:not(.name-tone-label) + em {
  transform: translateY(var(--tone-name-offset, 0px));
}
.style-name-tile[data-tone-compact-status] {
  grid-template-columns: max-content max-content;
  column-gap: 4px;
}
.style-name-tile[data-tone-compact-status] > span:not(.name-tone-label) {
  grid-column: 1 / -1;
}
.style-name-tile[data-tone-compact-status] > span:not(.name-tone-label) + em {
  grid-column: 1;
  grid-row: 2;
}
.style-name-tile[data-tone-compact-status] > span:not(.name-tone-label) + em + em {
  grid-column: 2;
  grid-row: 2;
  transform: translateY(var(--tone-name-offset, 0px));
}