.legend-disclosure {
  position: relative;
  width: min(650px, 100%);
  max-width: 100%;
  pointer-events: none;
}
.legend-disclosure > summary {
  display: flex;
  align-items: center;
  gap: 11px;
  width: max-content;
  min-height: 44px;
  margin-inline-end: auto;
  padding: 9px 14px;
  border: 1px solid #d3b77f;
  border-radius: 9px;
  background: #fffaf0f5;
  color: #5b4026;
  font-size: 16px;
  font-weight: 600;
  list-style: none;
  cursor: pointer;
  user-select: none;
  pointer-events: auto;
}
.legend-disclosure > summary::-webkit-details-marker { display: none; }
.legend-disclosure > summary:focus-visible { outline: 2px solid #ac813a; outline-offset: 3px; }
.legend-disclosure > summary::after {
  content: '';
  width: 7px;
  height: 7px;
  border-top: 2px solid currentColor;
  border-right: 2px solid currentColor;
  transform: rotate(-45deg);
}
.legend-disclosure[open] > summary::after { transform: rotate(135deg); }
.legend-disclosure > .legend {
  position: absolute;
  inset-inline-start: 0;
  bottom: calc(100% + 8px);
  width: max-content;
  max-width: 100%;
  flex-wrap: wrap;
  background: #fffaf0f7;
  box-shadow: 0 5px 24px #30201024;
  pointer-events: auto;
}
.legend-disclosure:not([open]) > .legend { display: none; }
.legend-disclosure .legend #legendItems span { display: flex; }