/* Shared disclosure icon and spacing across the viewer, modal and reference page. */
select {
  appearance: none;
  -webkit-appearance: none;
  background-image: url("assets/chevron-down.svg");
  background-repeat: no-repeat;
  background-position: right 14px center;
  background-size: 18px 18px;
  cursor: pointer;
}
.reference-filters select {
  background-image: url("assets/chevron-down.svg");
  background-repeat: no-repeat;
  background-position: right 14px center;
  background-size: 18px 18px;
  padding-inline: 12px 44px;
}
summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 44px;
  list-style: none;
}
summary::-webkit-details-marker { display: none; }
summary::marker { content: ""; }
summary::after {
  content: "";
  display: block;
  flex: 0 0 18px;
  width: 18px;
  height: 18px;
  margin-inline-start: auto;
  background: currentColor;
  mask: url("assets/chevron-down.svg") center / contain no-repeat;
  -webkit-mask: url("assets/chevron-down.svg") center / contain no-repeat;
  transition: transform 160ms ease;
}
details[open] > summary::after { transform: rotate(180deg); }
.reference-master summary { justify-content: flex-start; }
.master-label::after { display: none; }
.reference-detail summary, .recipe-detail summary { min-height: 44px; }
@media (prefers-reduced-motion: reduce) { summary::after { transition: none; } }