/* Follow the active theme, with contrast derived for the actual surface. */
.adaptive-visualization {
  box-sizing: border-box;
  max-width: 100%;
  min-width: 0;
  padding: .75rem;
  border: 1px solid currentColor;
  border-radius: min(var(--BorderRadius, .5rem), .75rem);
  background: var(--Background, Canvas);
  color: var(--ReadableOnBackground, CanvasText);
  font: 400 .875rem/1.5 var(--font-family, system-ui, sans-serif);
  text-shadow: none;
}
.adaptive-visualization label {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .5rem 1rem;
  color: inherit;
}
.adaptive-visualization select {
  box-sizing: border-box;
  min-width: 8rem;
  max-width: 100%;
  min-height: 44px;
  margin: 0;
  padding: .5rem 2rem .5rem .625rem;
  border: 1px solid currentColor;
  border-radius: .25rem;
  background: var(--Background, Canvas);
  color: var(--ReadableOnBackground, CanvasText);
  font: inherit;
  text-shadow: none;
  color-scheme: normal;
}
.adaptive-visualization select:focus-visible {
  outline: 3px solid currentColor;
  outline-offset: 3px;
}
.adaptive-visualization p {
  margin: .5rem 0 0;
  color: inherit;
  overflow-wrap: anywhere;
  text-shadow: none;
}
@media (max-width: 400px) {
  .adaptive-visualization label { align-items: stretch; flex-direction: column; }
  .adaptive-visualization select { width: 100%; }
}